three 3D實例學習
阿新 • • 發佈：2019-04-23
left ces bject char cursor utf-8 tor 一個 sets
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Page Title</title> <script src="three.js"></script> <script src="stats.js"></script> <script src="Tween.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #eeeeee; }
function initThree() { width = document.getElementById(‘canvas-frame‘).clientWidth; height = document.getElementById(‘canvas-frame‘).clientHeight; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0);
var camera;
function initScene() { scene = new THREE.Scene(); }
var light;
function initLight() { // light = new THREE.DirectionalLight(0xff0000); //方向光 // light.position.set(0, 0, 1); // scene.add(light);
light = new THREE.AmbientLight(0x00FF00); //環境光 light.position.set(100, 100, 200); scene.add(light);
// light = new THREE.PointLight(0xff0000); //點光源 // light.position.set(0, 0, 25); // scene.add(light); }
var cube, mesh;
function initObject() { var geometry = new THREE.BoxGeometry(100, 100, 100);
for (var i = 0; i < geometry.faces.length; i += 2) { var hex = Math.random() * 0xffffff; geometry.faces[i].color.setHex(hex); geometry.faces[i + 1].color.setHex(hex); } var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }); mesh = new THREE.Mesh(geometry, material); mesh.position = new THREE.Vector3(0, 0, 0); scene.add(mesh); }
function initGrid() { var helper = new THREE.GridHelper(1000, 50, 0x0000ff, 0x808080); scene.add(helper); }
function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); initGrid(); animation(); }
function animation() { // renderer.clear(); stats.update(); mesh.rotateY(0.01); renderer.render(scene, camera); requestAnimationFrame(animation); }
</script> </head>
<body onload="threeStart()"> <div style="margin-left:150px;"> <p>課前準備，繪制一個立方體和一個網格線</p> </div> <div id="canvas-frame"></div> </body>
</html>
<head> <meta charset="utf-8" /> <title>Page Title</title> <script src="three.js"></script> <script src="stats.js"></script> <script src="Tween.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #eeeeee; }
function initThree() { width = document.getElementById(‘canvas-frame‘).clientWidth; height = document.getElementById(‘canvas-frame‘).clientHeight; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0);
var camera;
function initScene() { scene = new THREE.Scene(); }
var light;
function initLight() { // light = new THREE.DirectionalLight(0xff0000); //方向光 // light.position.set(0, 0, 1); // scene.add(light);
light = new THREE.AmbientLight(0x00FF00); //環境光 light.position.set(100, 100, 200); scene.add(light);
// light = new THREE.PointLight(0xff0000); //點光源 // light.position.set(0, 0, 25); // scene.add(light); }
var cube, mesh;
function initObject() { var geometry = new THREE.BoxGeometry(100, 100, 100);
for (var i = 0; i < geometry.faces.length; i += 2) { var hex = Math.random() * 0xffffff; geometry.faces[i].color.setHex(hex); geometry.faces[i + 1].color.setHex(hex); } var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }); mesh = new THREE.Mesh(geometry, material); mesh.position = new THREE.Vector3(0, 0, 0); scene.add(mesh); }
function initGrid() { var helper = new THREE.GridHelper(1000, 50, 0x0000ff, 0x808080); scene.add(helper); }
function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); initGrid(); animation(); }
function animation() { // renderer.clear(); stats.update(); mesh.rotateY(0.01); renderer.render(scene, camera); requestAnimationFrame(animation); }
</script> </head>
<body onload="threeStart()"> <div style="margin-left:150px;"> <p>課前準備，繪制一個立方體和一個網格線</p> </div> <div id="canvas-frame"></div> </body>
</html>
three 3D實例學習