"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(); var ambientLight, light; function init() { var canvasWidth = window.innerWidth; var canvasHeight = window.innerHeight; var canvasRatio = canvasWidth / canvasHeight; // 攝影機 camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 80000 ); camera.position.set( -300, 300, -1000 ); camera.lookAt(0,0,0); // 光源 ambientLight = new THREE.AmbientLight( 0xFFFFFF ); light = new THREE.DirectionalLight( 0xFFFFFF, 0.7 ); light.position.set( -800, 900, 300 ); // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( canvasWidth, canvasHeight ); renderer.setClearColorHex( 0xAAAAAA, 1.0 ); renderer.gammaInput = true; renderer.gammaOutput = true; // 控制 cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement ); cameraControls.target.set(0, 0, 0); } function createBall() { // 不要改變顏色,改變材質的環境光與漫射數值 var material = new THREE.MeshBasicMaterial( { color: 0x80FC66, shading: THREE.FlatShading } ); var sphere = new THREE.Mesh( new THREE.SphereGeometry( 400, 64, 32 ), material ); return sphere; } function fillScene() { scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x808080, 2000, 4000 ); // 光源 scene.add( ambientLight ); scene.add( light ); var ball = createBall(); scene.add( ball ); } 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); } })