運行一把：
代碼解釋：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css"> body { /*移除所有的滾動條*/ margin: 0; overflow: hidden; } </style> </head> <body> <div id="WebGL-output"></div> <div id="Stats-output"></div> <script type="text/javascript" src="./libs/three.js"></script> <script type="text/javascript" src="./libs/stats.js"></script> <script type="text/javascript" src="./libs/dat.gui.js"></script> <script> function init() { var stats = initStats(); // 統計對象 var scene = new THREE.Scene(); // 場景容器, 用來保存並跟蹤所有我們想渲染的物體 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相機變量, 我們能夠在渲染好的場景scence里看到什么 var renderer = new THREE.WebGLRenderer(); // 渲染器對象, 負責計算指定相機角度下瀏覽器中scene的樣子 renderer.setClearColorHex(0xEEEEEE, 1.0); // 將renderer對象的背景色設置為0xEEEEEE renderer.setSize(window.innerWidth, window.innerHeight); // 讓renderer對象將scene渲染成多大尺寸 renderer.shadowMapEnabled = true; // 告訴渲染器需要陰影 var axes = new THREE.AxisHelper(20); // axes坐標軸對象 scene.add(axes); // 把坐標軸添加到場景中去 var planceGeometry = new THREE.PlaneGeometry(60, 20); // PlaneGeometry: 翻譯 平面幾何 (參數: 寬60, 高20) var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); // MeshLambertMaterial: 翻譯 網格材質 (用來設置平面的外觀, 顏色，透明度等) var plane = new THREE.Mesh(planceGeometry, planeMaterial); // 把這2個對象合並到一個名為plane(平面)的Mesh(網格)對象中 plane.receiveShadow = true; // 平面接收陰影 plane.rotation.x = -0.5*Math.PI; // 繞x軸旋轉90度 plane.position.x = 15; // 平面坐標位置 plane.position.y = 0; plane.position.z = 0; scene.add(plane); // 將平面添加到場景 var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); // Geometry: 翻譯 立方體幾何 var cubeMaterial = new THREE.MeshLambertMaterial({ color: '#12B7F5'}); // 立方體是0xff0000顏色 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 把立方體和他的外觀合並一下 cube.castShadow = true; // 立方體的陰影 cube.position.x = -3; // 立方體的坐標位置 cube.position.y = 3; cube.position.z = 0; scene.add(cube); // 將立方體添加進去場景中去 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); // 球體 var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff}); // 球體的外觀 var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 把球體和外觀合並一下 sphere.castShadow = true; // 球的陰影 sphere.position.x = 20; // 球體的位置 sphere.position.y = 4; sphere.position.z = 2; scene.add(sphere); // 把球體添加進場景去 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // lookAt函數指向場景的中心 // 添加一個光源 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; // 讓光源產生陰影 scene.add(spotLight); // 使用dat.GUI var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); gui.add(controls, 'bouncingSpeed', 0, 0.5); // 動畫函數 var step = 0; function renderScene() { stats.update(); // 方塊旋轉走你 cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.x += controls.rotationSpeed; // 球體彈跳走你改變的是position屬性 step += controls.bouncingSpeed; sphere.position.x = 20 + (10 * (Math.cos(step))); sphere.position.y = 2 + (10 * Math.abs(Math.sin(step))); requestAnimationFrame(renderScene); renderer.render(scene, camera); // 使用渲染器渲染 }; // 初始化統計對象 function initStats() { var stats = new Stats(); stats.setMode(0); // 0 表示FPS, 1 表示渲染時間 stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.querySelector('#Stats-output').appendChild(stats.domElement); return stats; }; document.querySelector('#WebGL-output').appendChild(renderer.domElement); // 把canvas添加到指定的dom中 renderScene(); }; window.onload = init; </script> </body> </html>
1. 使用了stats.js來初始化統計看initStats()方法, 在渲染的時候更新一下就好了
2. 使用dat.gui.js組件來控制變量，這個很不錯
3. 至於動畫，就很簡單了，無非就是改了position和rotation的值，通過dat.gui.js組件來改變就很方便了