"use strict"; // 參考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode //////////////////////////////////////////////////////////////////////////////// // 粒子系統 //////////////////////////////////////////////////////////////////////////////// var camera, scene, renderer; var cameraControls; var clock = new THREE.Clock(); function fillScene() { scene = new THREE.Scene(); var geometry = new THREE.Geometry(); // 學生作業:改寫以下程式在每 100 單位產生一個頂點 // 從 (-1000,-1000,-1000) 到 (1000,1000,1000) // 共 21*21*21 = 9261 點 for ( var i = 0; i < 8000; i ++ ) { var vertex = new THREE.Vector3(); // 只接受在圓內的點 do { vertex.x = 2000 * Math.random() - 1000; vertex.y = 2000 * Math.random() - 1000; vertex.z = 2000 * Math.random() - 1000; } while ( vertex.length() > 1000 ); geometry.vertices.push( vertex ); } var disk = THREE.ImageUtils.loadTexture( '/cs291/texture/disc.png' ); var material = new THREE.ParticleBasicMaterial( { size: 35, sizeAttenuation: false, map: disk, transparent: true } ); material.color.setHSL( 0.9, 0.2, 0.6 ); var particles = new THREE.ParticleSystem( geometry, material ); particles.sortParticles = true; scene.add( particles ); } function init() { canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; var canvasRatio = canvasWidth/canvasHeight; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer = new THREE.WebGLRenderer( { clearAlpha: 1 } ); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.setSize(canvasWidth, canvasHeight); renderer.setClearColorHex( 0xAAAAAA, 1.0 ); // 攝影機 camera = new THREE.PerspectiveCamera( 55, canvasRatio, 2, 8000 ); camera.position.set( 10, 5, 15 ); // 控制 cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement); cameraControls.target.set(0,0,0); } function addToDOM() { var container = document.getElementById('container'); var canvas = container.getElementsByTagName('canvas'); if (canvas.length>0) { container.removeChild(canvas[0]); } container.appendChild( renderer.domElement ); } function animate() { window.requestAnimationFrame(animate); render(); } function render() { var delta = clock.getDelta(); cameraControls.update(delta); renderer.render(scene, camera); } document.addEventListener("DOMContentLoaded", function () { try { init(); fillScene(); addToDOM(); animate(); } catch(e) { var errorReport = "你的程式遇到不可復原的錯誤,無法繪製 Canvas。錯誤是:<br/><br/>"; $('#container').append(errorReport+e); } })