threeJS簡介
爲了真正能夠使用three.js顯示任何內容，我們需要三件事：場景，相機和渲染器，以便我們可以使用相機渲染場景。github地址：https://github.com/mrdoob/three.js，直接下載，會非常慢，出現下載不成功。奉上資源的百度網盤地址：https://pan.baidu.com/s/1d5miM_0qmntxVt8QdvZ8UQ ，密碼:mu1r
threeJs的幾個核心對象：
- Scene（場景）
- Camera（相機）
- Light（光源）
- Mesh（模型）
- Renderer（渲染器）
- Loader（加載器，用來導入模型）
three.js中常用的語法：
| 語法 | 描述 |
|---|---|
| new THREE.Scene() | 創建場景 |
| new THREE.PerspectiveCamera(num,width/height) | 創建相機，第一個參數是視野。表示看到的場景範圍，以度爲單位。第二個是長寬比。接下來的兩個參數表示近和遠裁剪平面，指對象從相機比的值越遠遠或近於附近將不會被渲染。 |
| new THREE.WebGLRenderer() | 創建渲染器 |
| renderer.setSize() | 設置渲染器尺寸 |
| query.appendChild(renderer.domElement) | 將<canvas>元素添加到dom元素中 |
| new THREE.Mesh(geometry, material) | 創建一個模型，第一個參數表示幾何形狀，第二個參數表示材質 |
| scene.add() | 將參數（模型、光源等對象）添加到場景中 |
| renderer.render(scene, camera) | 將場景和相機渲染到頁面中 |
一個完整的簡單的three.js案例：
案例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src="../js/three.js"></script>
<script>
init();
box();
animate();
var scene,camera,renderer,cube
function init(){
//創建場景
scene = new THREE.Scene();
//創建相機
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//創建渲染器
renderer = new THREE.WebGLRenderer();
//渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//將renderer（渲染器）的dom元素（renderer.domElement）添加到我們的HTML文檔中。
//這就是渲染器用來顯示場景給我們看的<canvas>元素
document.body.appendChild(renderer.domElement);
//默認情況下，當我們調用scene.add()的時候，物體將會被添加到(0,0,0)座標。但將使得攝像機和立方體彼此在一起。
//爲了防止這種情況的發生，我們只需要將攝像機稍微向外移動一些即可。
camera.position.z = 5;
}
function box(){
//創建一個立方體，我們需要一個BoxGeometry（立方體）對象
var geometry = new THREE.BoxGeometry(1, 1, 1);
//材質，來讓它有顏色
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
//Mesh（網格）。 網格包含一個幾何體以及作用在此幾何體上的材質
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}
//“渲染循環”（render loop）或者“動畫循環”（animate loop）
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
</script>
</body>
</html>
下一篇文章來實現 加載3D皮卡丘.obj模型，實現縮放、旋轉等功能。