為什么要用three.js
Three.js為我們封裝了底層的WebGl接口，使我們在無需掌握繁冗的圖形學知識的基礎下可以輕松的創建三維場景。相比較使用底層的WebGL我們可以使用更少的代碼，大大的降低了學習成本，使開發變的更高效。
新建HTML頁面
首先新建一個HTML頁面，引入Three.js文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>three.js</title> </head> <body> <script type="text/javascript" src="js/Three/three.js"></script> <script> </script> </body> </html>
創建一個三維場景
var scene = new THREE.Scene();
添加一個渲染器
Three.js為我們提供了如：canvas,SVG,CSS3..眾多渲染器，但是WebGL渲染器相較比較靈活，所以均以WebGL為例。
var render = new THREE. THREE.WebGLRenderer({ //抗鋸齒屬性，WebGLRenderer常用的一個屬性 antialias: true }); //設置背景色為白色(0xffffff) render.setClearColor(0xffffff); //設置渲染尺寸為頁面大小 render.setSize(window.innerWidth, window.innerHeight); //使用WebGLRenderer生成canvas元素。 document.body.appendChild(render.domElement);
當然也可以自己定義一個
canvascanvas <canvas id="myCanvas" width="400px" height="300px" ></canvas> 並將WebGLRenderer定義改為 var render = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas'), antialias: true });
三維場景中重要的組件
三維場景中重要的組件包括 renderer(渲染器)、scene(場景) 和camera(相機)。
three.js使用的右手坐標系。
camera
camera(相機)，決定了你開始看到三維場景的位置，朝向和角度等信息。
three.js相機有兩種
PerspectiveCamera(fov,aspect,near,far) 透視相機
fov :視角。從相機能看到的部分場景。對於游戲來講大概有60到90度左右的視場。推薦默認值：45
aspect:長寬比。渲染結果的橫向長度和縱向長度比。推薦默認值：window.innerWidth/window.innerHeight
near ：相機開始看到的渲染距離。推薦默認值:0.1
far :相機最遠可以看到的渲染距離。推薦默認值：1000
OrthographicCamera(left,right,top,bottom,near,far) 正投影相機
left ：相機可以看到渲染的左平面。
right ：相機可以看到渲染的右平面。
top ：相機可以看到渲染的上平面。
bottom：相機可以看到渲染的下平面。
naer :同上PerspectiveCamera
far :同上PerspectiveCamera
camera 常用到的函數包括：lookAt()設置相機所看的位置
<span style="font-family:Courier New;">
camera.lookAt(new THREE.Vector3(10,10,10));
</span>
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //設置相機朝向位置為(20,0,20) camera.lookAt(new THREE.Vector3(20, 0, 20));
light
light(光源)，決定了你的場景擁有的光源類型和會產生的光照效果。
three.js里面燈光主要有四種
1.AmbientLight(影響整個場景的光源)
AmbientLight的光線沒有特定的來源，所以不需要指定位置信息。也不會對陰影的生成產生影響。
2.PointLight(照射所有方向的光源)
PointLight一般不用來產生陰影，PointLight的光線來自四面八方產生陰影會為GPU帶來沉重負擔。
3.SpotLight(具有錐形效果的光源)
SpotLight產生的陰影為圓錐形狀。
4.DirectionLight(模擬遠處類似太陽的光源)
DirectionLight產生的陰影為方塊形狀。
光源的幾個主要屬性：color:光源顏色
intensity:光源的強度 默認值：1
distance:光源的照射距離
position:光源的所在位置
visible:光源是否可見
材質和幾何體構成網格，決定幾何體是否像金屬，透明與否，已經是否顯示成線框。
-
MeshBasicMaterial：對光照無感，給幾何體一種簡單的顏色或顯示線框
-
MeshLambertMaterial：這種材質對光照有反應，用於創建暗淡的不發光的物體
-
MeshPhongMaterial：這種材質對光照也有反應，用於創建金屬類明亮的物體
我們在場景中先添加了幾個物體,然后添加了一個會移動的SpotLight光源便會看到物體陰影會隨着光源變化而變化。
物體添加陰影：
1.渲染器開啟shadowMap
- renderer.shadowMapEnabled = true;
shadowMap的樣式有 THREE.BasicShadowMap ， THREE.PCFShadowMap ， THREE.PCFSoftShadowMap 三種。參數為0-2。
如：設置shadowMap樣式為 THREE.BasicShadowMap
- renderer.shadowMap = 0;
2.燈光生成陰影
- light.castShadow = true;
3.地面接收陰影
- plane.receiveShadow = true;
4.物體產生陰影
- mesh.castShadow = true;
var light = new THREE.AmbientLight(0xffffff); //使用 Scene()的add方法將light添加到Scene中 scene.add(light);
object
THREE.CubeGeometry ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );//立方體 THREE.CylinderGeometry ( radiusTop, radiusBottom, height, segmentsRadius, segmentsHeight, openEnded );//円錐型 THREE.OctahedronGeometry ( radius, detail ) //八面體 THREE.PlaneGeometry ( width, height, segmentsWidth, segmentsHeight ); //平面型 THREE.SphereGeometry ( radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength );//球型 THREE.TorusGeometry ( radius, tube, segmentsR, segmentsT, arc )//トーラス型
object(物體)，你想要添加到場景中的各式各樣的物體。
//物體三維圖形 var geometry = new THREE.CubeGeometry(4, 4, 4); //物體材質 var material = new THREE.MeshBasicMaterial({ color: 0x4d6dad }); //生成三維物體 var mesh = new THREE.Mesh(geometry, material); mesh.position.set(10, 0, 10); //使用 Scene()的add方法將mesh添加到Scene中 scene.add(mesh);
渲染場景
1.聲明渲染器對象，我們用new THREE.WebGLRenderer()來新建一個WebGL渲染器。
其中WebGLRenderer()中有一些參數我們可以設置，以下這些參數來自於官方文檔：
(1)antialias:
值：true/false
含義：是否開啟反鋸齒，設置為true開啟反鋸齒。
(2)precision:
值：highp/mediump/lowp
含義：着色精度選擇。
(3)alpha:
值：true/false
含義：是否可以設置背景色透明。
(4)premultipliedAlpha:
值：true/false
含義：？
(5)stencil:
值：true/false
含義：?
(6)preserveDrawingBuffer:
值：true/false
含義：是否保存繪圖緩沖，若設為true，則可以提取canvas繪圖的緩沖。
(7)maxLights:
值：數值int
含義：最大燈光數，我們的場景中最多能夠添加多少個燈光。
2.制定渲染器的寬高，我們用renderer.setSize(width,height)來設置；
3.追加生成的canvas元素到容器元素中。canvas對象的獲取方法為renderer.domElement；
4.設置canvas背景色(clearColor)和背景色透明度（clearAlpha）,renderer.setClearColor(clearColor,clearAlpha);
那么以上就是three.js渲染器的一些常用設置了，大家可以實際檢驗一下各種參數所起的作用。
定時刷新場景，調用WebGLRenderer的render函數刷新場景。
function render() { requestAnimationFrame(render); renderer.render(scene, camera); }
添加動畫
我們可以通過在render()函數中對object(物體)的position(位置)，rotation(旋轉)和scale(縮放)屬性進行控制來實現簡單地動畫效果。渲染的FPS為60，也就意味着一秒鍾會變化60次。
mesh.rotation.y += Math.PI / 180 * 1;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>three-basic</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="libs/three.js"></script> <script> var scene, renderer, camera, mesh;//場景，渲染器，相機，網格 function init() {//初始化 scene = new THREE.Scene();//場景 renderer = new THREE.WebGLRenderer({//渲染器 antialias: true//是否開啟反鋸齒 }); renderer.setClearColor(0xffffff); //設置canvas背景色(clearColor) renderer.setSize(window.innerWidth, window.innerHeight);//指定渲染器的高寬（和畫布框大小一致） camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 透視相機(視角，長寬比，開始看到的渲染距離，最遠的渲染距離) camera.lookAt(new THREE.Vector3(20, 0, 20));//設置相機朝向位置為(20,0,20) var light = new THREE.AmbientLight(0xffffff);//燈光，AmbientLight影響整個場景的光源 scene.add(light); var geometry = new THREE.CubeGeometry(4, 4, 4);//創建立方體 var material = new THREE.MeshBasicMaterial({//材質，MeshBasicMaterial：對光照無感，給幾何體一種簡單的顏色或顯示線框 color: 0x4d6dad }); mesh = new THREE.Mesh(geometry, material);//Mesh（圖元裝配函數） 生成三維物體 mesh.position.set(10, 0, 10); scene.add(mesh); //使用 Scene()的add方法將mesh添加到Scene中 document.body.appendChild(renderer.domElement); render(); } function render() { mesh.rotation.y += Math.PI / 180 * 1;//添加動畫 renderer.render(scene, camera);//調用WebGLRenderer的render函數刷新場景 requestAnimationFrame(render); } init(); </script> <script type="text/javascript" src="../js/cjy_info.js"></script> </body> </html>
原文https://chenjy1225.github.io/2016/08/08/three-js-basic/