"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 myPolygon = new SquareGeometry(); var myTexture = THREE.ImageUtils.loadTexture( '/cs291/texture/ash_uvgrid01.jpg' ); var myPolygonMaterial = new THREE.MeshBasicMaterial( { map: myTexture } ); var polygonObject = new THREE.Mesh( myPolygon, myPolygonMaterial ); scene.add(polygonObject); } function SquareGeometry() { var geo = new THREE.Geometry(); // 學生應該在這裡添加程式 // 產生頂點 geo.vertices.push( new THREE.Vector3( 0.0, 0.0, 0.0 ) ); geo.vertices.push( new THREE.Vector3( 1.0, 0.0, 0.0 ) ); geo.vertices.push( new THREE.Vector3( 1.0, 1.0, 0.0 ) ); var uvs = []; uvs.push( new THREE.Vector2( 0.0, 0.0 ) ); uvs.push( new THREE.Vector2( 1.0, 0.0 ) ); uvs.push( new THREE.Vector2( 1.0, 1.0 ) ); // 產生面 geo.faces.push( new THREE.Face3( 0, 1, 2 ) ); geo.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[1], uvs[2] ] ); // 完成:回傳 return geo; } function drawHelpers() { // 背景格線與軸。格線一格為 1,軸交叉在 (0, 0) Coordinates.drawGrid({size:100,scale:1,orientation:"z",offset:-0.01}); Coordinates.drawAxes({axisLength:2.1,axisOrientation:"x",axisRadius:0.004,offset:-0.01}); Coordinates.drawAxes({axisLength:2.1,axisOrientation:"y",axisRadius:0.004,offset:-0.01}); } 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 init() { canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; var canvasRatio = canvasWidth/canvasHeight; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.setSize(canvasWidth, canvasHeight); renderer.setClearColorHex( 0xFFFFFF, 1.0 ); // 攝影機: Y 上、X 右、Z 上 camera = new THREE.PerspectiveCamera( 1, canvasRatio, 50, 150 ); camera.position.set( 0.5, 0.5, 100 ); // 控制 cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement); cameraControls.target.set(0.5,0.5,0); } 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(); drawHelpers(); addToDOM(); animate(); } catch(e) { var errorReport = "你的程式遇到不可復原的錯誤,無法繪製 Canvas。錯誤是:<br/><br/>"; $('#container').append(errorReport+e); } })