Three.js入門篇（一）創建一個場景
阿新 • • 發佈：2017-06-15
style api text webgl () mes utf 動畫 fun
上一面講述了向場景中添加物體對象。這一篇準備把每個功能點細細的講述一遍，一方面是為了加深自己的理解。另一方面希望能夠
幫助到有需要的人。
一、在學習WEBGL的時候，你應該先了解要創建一個WebGL程序需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。
- 初始化WebGL繪圖上下文
- 初始化著色器程序
- 建立模型和數據緩存
- 完成繪制和動畫
這是一個面向過程編程。然而three.js不一樣，是一個面向對象編程。主要構建三個對象 scene(場景) camera(相機) renderer(渲染器).。
這三個東西是什麽意思呢？聽起來完全不懂是啥。舉個小列子：就拿電影來說。場景（scene)就好比整個布局空間，相機(camera)相當於
拍攝期。而渲染器相當於(renderer)把拍攝的電影轉換成膠卷也就是電腦的屏幕。
場景和空間包含了3D和數據模型，而renderer包含了著色器和WebGL繪圖上下文。
二、THREE.JS創建場景，相機，渲染器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo1(three入門第一篇)</title> </head> <body> </body> <scripttype="text/javascript" src="js/three.js"></script> <script type="text/javascript"> var width = window.innerWidth, height = window.innerHeight; var scene = new THREE.Scene(); //創建一個場景 var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創建相機 /* three.js創建相機的方式有很多種,其中最長用的是PerspectiveCamera(); 遠景相機，相當於人眼觀察模式 肯定有人會有疑問，這幾個參數是什麽意思呢？ 第一個 75 是 視角 width / height 相機拍攝面的長寬比，別問為什麽這麽寫，我也沒搞清楚。反正設置為窗口 的width/height圖形就不會被壓變形。 下面兩個是近裁剪面。和遠裁剪面。*/ var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer //WebGLrenderer其實是用CANVAS渲染。 renderer.setSize(width,height); document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement); </script> </html>
電影，場景，膠卷都準備好了，那如何才能展示演員呢？也就是上面一篇說 的如何向場景中添加物體對象呢？
三、添加演員（3D立方體）。
//演員進場 var geometry = new THREE.BoxGeometry(1,1,1); //BoxGeometry(); 3D盒子模型。包含了立方體所有頂點和填充面的對象。 var material = new THREE.MeshBasicMaterial({color:‘red‘}); //有個幾何模型，我們需要材料為其上色。我們采用的時候 網孔基礎材料MeshBasicMaterial(); var mesh = new THREE.Mesh(geometry,material); //需要一個網孔,來承載幾何模型和材料 scene.add(mesh); //把這個網孔放置到場景中去。 camera.position.z = 5; //調節相機的位置。 renderer.render(scene,camera); //把畫面轉換成相機，並播放
這樣這個演員就入鏡了。
四、如何讓這個演員動起來呢？
//懂動起來。 function loop(){ requestAnimationFrame(loop); mesh.rotation.x += 0.1; //X選擇 mesh.rotation.y += 0.1; //Y旋轉 renderer.render(scene,camera); //把畫面轉換成相機，並播放 } loop(); //解釋下requestAnimationFrame這個api /* requestAnimationFrame這個函數，它用來替代 setInterval， 這個新接口具備多個優點， 比如瀏覽器Tab切換後停止渲染以節約資源、 和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。 簡直就是動畫神奇 */
演員入鏡，並有了，打動效果。第一個小短篇算完成了吧。
五、整個代碼(本來想托管到githup上)。發現太慢了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1(three入門第一篇)</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript">
var width = window.innerWidth, height = window.innerHeight;
var scene = new THREE.Scene(); //創建一個場景
var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //創建相機
/*
three.js創建相機的方式有很多種,其中最長用的是PerspectiveCamera();
遠景相機，相當於人眼觀察模式
肯定有人會有疑問，這幾個參數是什麽意思呢？
第一個 75 是 視角
width / height 相機拍攝面的長寬比，別問為什麽這麽寫，我也沒搞清楚。反正設置為窗口
的width/height圖形就不會被壓縮。
下面兩個是近裁剪面。和遠裁剪面。
*/
var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer
//WebGLrenderer其實是用CANVAS渲染。
renderer.setSize(width,height);
document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement);
//演員進場
var geometry = new THREE.BoxGeometry(1,1,1);
//BoxGeometry(); 3D盒子模型。包含了立方體所有頂點和填充面的對象。
var material = new THREE.MeshBasicMaterial({color:‘red‘});
//有個幾何模型，我們需要材料為其上色。我們采用的時候 網孔基礎材料MeshBasicMaterial();
var mesh = new THREE.Mesh(geometry,material);
//需要一個網孔,來承載幾何模型和材料
scene.add(mesh); //把這個網孔放置到場景中去。
camera.position.z = 5; //調節相機的位置。
//懂動起來。
function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X選擇
mesh.rotation.y += 0.1; //Y旋轉
renderer.render(scene,camera); //把畫面轉換成相機，並播放
}
loop();
//解釋下requestAnimationFrame這個api
/*
requestAnimationFrame這個函數，它用來替代 setInterval， 這個新接口具備多個優點，
比如瀏覽器Tab切換後停止渲染以節約資源、
和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退為setInterval。
簡直就是動畫神奇
*/
</script>
</html>
六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一個一個的慢慢累積。
Three.js入門篇（一）創建一個場景