什麼是threejs
簡單地，可以理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那麼合起來，three.js就是使用javascript 來寫3D程序的意思。
Javascript是運行在網頁端的腳本語言，那麼毫無疑問Three.js也是運行在瀏覽器上的。
three.js下載使用
百度網盤下載：
鏈接:https://pan.baidu.com/s/1nLVHiSNPFxVpEopPB2F_fw
提取碼:fd88
three.js官網：https://threejs.org/
GitHub地址：https://github.com/mrdoob/three.js
引用cdn:
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>示例01
通過THREE訪問所有的API
console.log('打印場景API',THREE.Scene);
Three.js三大組建
在Three.js中，要渲染物體到網頁中，我們需要3個組建：場景（scene）、相機（camera）和渲染器（renderer）
一、場景（scene）
在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就可以了.
語法：var scene = new THREE.Scene();
1、幾何體Geometry
語法
創建一個立方體
var box=new THREE.BoxGeometry(100,100,100);
創建一個球體幾何對象
var geometry = new THREE.SphereGeometry(60, 40, 40);
示例：添加物體到場景中
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);CubeGeometry的原型
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
2、材質Material
語法
var material=new THREE.MeshLambertMaterial({color:0x0000ff});
對象包含了顏色、透明度等屬性。
3、光源Light
語法var point=new THREE.PointLight(0xffffff);
參數0xffffff定義的是光照強度。
二、相機（camera）
在Threejs中有多種相機。主要介紹兩種：
透視相機（THREE.PerspectiveCamera）、
正射投影(THREE.OrthographicCamera)
語法：
光源：var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
環境光：var ambient =new THREE.AmbientLight(0x444444);
相機位置：camera.position.set(200, 300, 200);
相機拍照方向：camera.lookAt(scene.position);
三、渲染器（renderer)
渲染應該使用渲染器，結合相機和場景來得到結果畫面。
創建渲染器對象：var renderer = new THREE.WebGLRenderer();
執行渲染操作 （指定場景、相機作爲參數 ） renderer.render(scene, camera);
渲染函數的原型如下：render( scene, camera, renderTarget, forceClear )
各個參數的意義是：
- scene：前面定義的場景
- camera：前面定義的相機
- renderTarget：渲染的目標，默認是渲染到前面定義的render變量中
- forceClear：每次繪製之前都將畫布的內容給清除，即使自動清除標誌autoClear爲false，也會清除。
渲染有兩種方式：實時渲染和離線渲染 。
其畫面質量是很高的，它是事先渲染好一幀一幀的圖片，然後再把圖片拼接成電影的。這就是離線渲染。
實時渲染：就是需要不停的對畫面進行渲染，即使畫面中什麼也沒有改變，也需要重新渲染。
three.js第一個案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
<script src="js/three.min.js"></script>
</head>
<body>
<script>
//創建場景對象scene
var scene=new THREE.Scene();
//創建幾何體對象
var geometry=new THREE.BoxGeometry(200,100,100);
//創建材料對象
var material=new THREE.MeshLambertMaterial({
color:0xcd5c5c
});
//網格模型對象Mesh
var mesh=new THREE.Mesh(geometry,material);
//將網絡模型添加到場景中
scene.add(mesh);
//創建點光源
var point=new THREE.PointLight(0xffffff);
//設置點光源位置
point.position.set(400,200,300);
//將光源添加到場景中
scene.add(point);
//創建環境光
var ambient=new THREE.AmbientLight(0x778899);
//將環境光添加到場景中
scene.add(ambient);
//相機設置
var width=window.innerWidth;
var height=window.innerHeight;
var k=width/height;//窗口寬高比
//三維場景顯示範圍控制係數，係數越大，顯示的範圍越大
var s=200;
//創建相機對象
var camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
camera.position.set(200,300,200);
camera.lookAt(scene.position);
//創建渲染對象
var renderer=new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.setClearColor(0xdcdcdc,1);//設置背景顏色
///body元素中插入canvas對象
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
</script>
</body>
</html>
代碼修改var geometry=new THREE.BoxGeometry(200,100,100);
代碼修改var geometry=new THREE.SphereGeometry(60, 40, 40);
