Three.js 是一款運行在瀏覽器中的 3D 引擎，我們可以用它在 web 中創(chuàng)建各種三維場景，包括了攝影機、光影、材質等各種對象。使用它可以讓我們更加直觀的了解 webgl 的世界。
一、搭建HTML框架，導入libs
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript" src="./libs/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
}
window.onload = init
</script>
</body>
</html>
二、Three.js三要素
1、場景（Scene）
場景（Scene）是一個容器，主要用于保存、跟蹤所要渲染的物體和使用的光源。
一個場景想要顯示任何東西，必須要添加攝像機（Camera）、光源和對象。這將在第三部分進行介紹。
下面來添加一個場景（Scene）
var scene = new THREE.Scene();
2、攝像機（Camera）
攝像機（Camera）決定了能夠在場景中看到什么
下面來定義一個攝像機（Camera）及其坐標
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 30;
camera.position.y = 20;
camera.position.z = 40;
camera.lookAt(scene.position);
其中用到了PerspectiveCamera(fov, aspect, near, far)
- fov 可視角度
- aspect 為width/height,通常設置為canvas元素的高寬比。
- near近端距離
- far遠端距離
只有離相機的距離大于near值，小于far值，且在相機的可視角度之內，才能被相機投影到。
3、渲染器（renderer）
顧名思義，渲染器（renderer）是將觀察到的場景渲染到瀏覽器中。
下面來定義一個渲染器（renderer），并設置它的背景色和尺寸大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
三、為場景添加元素
1、添加光源
這里添加一個點光源
var spotLight = new THREE.SpotLight(0xffffff); //定義一個點光源，并設置顏色
spotLight.position.set(40, 60, 40); //設置點光源坐標
spotLight.castShadow = true;
scene.add(spotLight);
2、添加一個輔助坐標軸
var axes = new THREE.AxisHelper(20);
scene.add(axes);
3、添加一個物體
這里添加一個使用MeshLambertMaterial材質的長方體
var sphereGeometry = new THREE.SphereGeometry(6, 4, 4); // 創(chuàng)建一個長方體
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});// 創(chuàng)建一個材質
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 構造一個球體并附著材質
sphere.position.x = 0; //設置球體的x軸坐標
sphere.position.y = 4; //設置球體的x軸坐標
sphere.position.z = 0; //設置球體的x軸坐標
scene.add(sphere);
4、添加一個輔助平面（可選）
var planeGeometry = new THREE.PlaneGeometry(40, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
四、輸出
接下來使用渲染器來輸出建模結果
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
可以看到我們的建模結果如圖所示
Github鏈接：https://github.com/JayneJing/ThreeJs-test/blob/master/threejs-1.html
參考資料：《Three.js開發(fā)指南》
