"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 teapotSize = 400; function fillScene() { scene = new THREE.Scene(); // 燈光 scene.add( new THREE.AmbientLight( 0x333333 ) ); var light = new THREE.DirectionalLight( 0xFFFFFF, 0.9 ); light.position.set( -1300, 700, 1240 ); scene.add( light ); light = new THREE.DirectionalLight( 0xFFFFFF, 0.7 ); light.position.set( 1000, -500, -1200 ); scene.add( light ); // 材質 var path = "/cs291/texture/skybox/"; var urls = [path + "px.jpg", path + "nx.jpg", path + "py.jpg", path + "ny.jpg", path + "pz.jpg", path + "nz.jpg" ]; var textureCube = THREE.ImageUtils.loadTextureCube( urls ); textureCube.format = THREE.RGBFormat; var teapotMaterial = new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa } ); var teapot = new THREE.Mesh( new THREE.TeapotGeometry( teapotSize, 8, true, true, true, true, true ), teapotMaterial ); scene.add( teapot ); var shader = THREE.ShaderLib.cube; shader.uniforms.tCube.value = textureCube; var skyMaterial = new THREE.ShaderMaterial( { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms, depthWrite: false, side: THREE.BackSide } ); var sky = new THREE.Mesh( new THREE.CubeGeometry( 5000, 5000, 5000 ), skyMaterial ); scene.add( sky ); } function init() { canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; var canvasRatio = canvasWidth/canvasHeight; // 攝影機 camera = new THREE.PerspectiveCamera( 45, canvasWidth/ canvasHeight, 100, 20000 ); camera.position.set( -222, 494, 1746 ); // 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, -160, 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() { 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); } })