一、環境準備
1.開發工具選用WebStorm，因為WebStorm自帶了一個本地伺服器，而Three.js的很多特性需要在伺服器端才能展現。
2.three.js庫的下載下傳與導入
3.打開調用three.js的html的網頁檔案時，需要借助WebStorm提供的本地伺服器，如圖所示，通過點選右上角浏覽器圖示而打開網頁檔案。
二、檔案結構
三、例子展示
四、源碼展示
html檔案：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="three.js"></script>
</head>
<body>
<!-- 用于接收three.js畫面的輸出 -->
<div id="WebGL-output"> </div>
<script>
// 當頁面加載完畢後，調用此函數，初始化畫面
function init() {
// 建立【場景】，場景用于存放各種物體、光源等
var scene = new THREE.Scene();
// 建立【相機】，相機相當于視角，可以定義視角（相機）的在【場景】中的朝向，遠近面等
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 建立【渲染器】，渲染器用于加載畫面，計算指定【相機】角度下浏覽器中【場景】的樣子
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// 展示坐标軸
var axes = new THREE.AxisHelper(50);
scene.add(axes);
// 建立地面
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// 将地面旋轉一定角度
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// 将地面添加到場景中
scene.add(plane);
// 建立立方體
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// 設定立方體的位置坐标
cube.position.x = -4;
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.position.x = 20;
sphere.position.y = 0;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
// 設定相機的位置和視角朝向
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 增加環境光源
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// 增加點光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
// 将畫面輸出到id為WebGL-output的div标簽中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// 渲染【場景】
var step = 0;
renderScene();
function renderScene() {
// 立方體旋轉
cube.rotation.x += 0;
cube.rotation.y += 0.1;
cube.rotation.z += 0.1;
// 球體跳躍
step += 0.04;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 4 + ( 10 * Math.abs(Math.sin(step)));
// 遞歸渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
window.onload = init;
</script>
</body>
</html> 五、附加
1.球體運動的算法介紹：
2.對比 Three.js中的 requestAnimationFrame() 與原生js中的setInterval()：