快捷導(dǎo)航

Three.js基礎(chǔ)學(xué)習(xí)教程

更新時(shí)間：2017年11月16日 10:41:04 作者：Avenstar

這篇文章主要為大家詳細(xì)介紹了Three.js基礎(chǔ)學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、Three.js官網(wǎng)及使用Three.js必備的三個(gè)條件

1.Three.js 官網(wǎng) https://threejs.org/

2.使用Three.js必備的三個(gè)條件

(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)

大致意思是使用three.js可以實(shí)現(xiàn)任何顯示的東西，必須滿足三個(gè)條件: a scene場(chǎng)景、a camera相機(jī)、a renderer渲染器. 三者缺一不可。

二、使用Three.js必備三個(gè)條件（a scene場(chǎng)景、a camera相機(jī)、a renderer渲染器）之間的關(guān)系　

如上圖所示，來說明a scene場(chǎng)景、a camera相機(jī)、a renderer渲染器三者之間關(guān)系[/code]

1.場(chǎng)景scene是一個(gè)物體的容器【通俗理解裝東西的嘛】，開發(fā)者可以將需要的角色放入場(chǎng)景中，例如蘋果，葡萄。同時(shí)，角色自身也管理著其在場(chǎng)景中的位置。

2.相機(jī)camera的作用就是面對(duì)場(chǎng)景，在場(chǎng)景中取一個(gè)合適的景，把它拍下來?！究梢韵胂蟪扇说难劬Α?/p>

3.渲染器renderer的作用就是將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示

三、通過上述理論來實(shí)踐官網(wǎng)案例

效果圖如下

官網(wǎng)案例實(shí)現(xiàn)源碼

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="./lib/three.js"></script>
 <script>
  //創(chuàng)建一個(gè)場(chǎng)景對(duì)象
  var scene = new THREE.Scene();
  //創(chuàng)建一個(gè)相機(jī)對(duì)象
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
  //創(chuàng)建一個(gè)渲染器對(duì)象
  var renderer = new THREE.WebGLRenderer(); 
  //設(shè)置畫布尺寸
  renderer.setSize( window.innerWidth, window.innerHeight );
  //設(shè)置畫布色
   renderer.setClearColor(0x00AABB, 1.0);
   //將渲染畫布添加到瀏覽器中，以便后面剩放相機(jī)拍下的景
  document.body.appendChild( renderer.domElement );
  
  //創(chuàng)建一個(gè)幾何體長(zhǎng)、寬、高分別為1幾何體對(duì)象
  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  //材料、皮膚
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  //將material材料添加到幾何體geometry，產(chǎn)生新的對(duì)象幾何體cube
  var cube = new THREE.Mesh( geometry, material );
  //將幾何體添加至場(chǎng)景中
  scene.add( cube );
  //設(shè)置相機(jī)z軸，垂直電腦屏幕位置
  camera.position.z = 5;
   
  var render = function () {
  /*requestAnimationFrame( render ); //循環(huán)渲染
  cube.rotation.x += 0.1; //x軸每秒旋轉(zhuǎn)60次
  cube.rotation.y += 0.1;//y軸每秒旋轉(zhuǎn)60次*/
  renderer.render(scene, camera); //實(shí)時(shí)將相機(jī)拍下的幾何體渲染到場(chǎng)景中
  };
  render();
</script>
 </body>
</html>

通過官網(wǎng)案例不難發(fā)現(xiàn)，camera照相機(jī)默認(rèn)的觀察方向是屏幕的方向(z軸負(fù)方向),當(dāng)變化坐標(biāo)以后，就要將照相機(jī)指向原點(diǎn)，才能觀察到物體

z軸負(fù)方向？？？因此這里很有必要說說三維坐標(biāo)（如下圖）

照相機(jī)指向原點(diǎn)？？？來說說相機(jī)camera相機(jī)（很重要!!想象一下人看不到東西是什么感覺）.

案例中采用透視相機(jī)（從視點(diǎn)開始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。）

var camera = new THREE.PerspectiveCamera(fov, aspect , near,far)

new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機(jī)
視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場(chǎng)景中的物體越小，視野角越小，場(chǎng)景中的物體越大
縱橫比：aspect
相機(jī)離視體積最近的距離：near
相機(jī)離視體積最遠(yuǎn)的距離：far

綜上，相信結(jié)合上述三維坐標(biāo)、相機(jī)圖理解相機(jī)、就應(yīng)該變得很簡(jiǎn)單咯哦.接下來接著修改上述案例（說明后面案例鼠標(biāo)滾動(dòng)放大縮小、三維旋轉(zhuǎn)都是基于相機(jī)來實(shí)現(xiàn)的）

四、將官網(wǎng)案修改且設(shè)置相機(jī)朝向及相機(jī)位置

利用[lookAt]方法來設(shè)置相機(jī)的視野中心。「lookAt()」的參數(shù)是一個(gè)屬性包含中心坐標(biāo)「x」「y」「z」的對(duì)象。

設(shè)置相機(jī)的上方向?yàn)檎较騳軸 camera.up.x = 0; camera.up.y = 1/*相機(jī)朝向--相機(jī)上方為y軸*/; camera.up.z = 0;

五、實(shí)現(xiàn)旋轉(zhuǎn)立方體

旋轉(zhuǎn)動(dòng)畫原理相機(jī)圍繞y軸旋轉(zhuǎn)，不斷修改相機(jī)x、z軸位置，并且保持場(chǎng)景中的物體一直再相機(jī)的視野中，實(shí)時(shí)將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示

//相機(jī)圍繞y軸旋轉(zhuǎn)，不斷修改相機(jī)x、z軸位置，并且保持場(chǎng)景中的物體一直再相機(jī)的視野中
//實(shí)時(shí)渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //設(shè)置相機(jī)視野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回調(diào)函數(shù)
}

實(shí)現(xiàn)效果圖如下所示

旋轉(zhuǎn)立方體——案例源碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>旋轉(zhuǎn)立方體 </title>
 <style>
  #canvas-frame {
  width: 100%;
  height: 600px;
  }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
  var renderer, //渲染器
  width = document.getElementById('canvas-frame').clientWidth, //畫布寬
  height = document.getElementById('canvas-frame').clientHeight; //畫布高
  //初始化渲染器
  function initThree(){
  renderer = new THREE.WebGLRenderer({
   antialias : true
   //canvas: document.getElementById('canvas-frame')
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0xFFFFFF, 1.0);
  document.getElementById('canvas-frame').appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
  }
  //初始化場(chǎng)景
  var scene;
  function initScene(){
  scene = new THREE.Scene();
  }
  var camera;
  function initCamera() { //透視相機(jī)
  camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
  camera.position.x = 50;
  camera.position.y = 150;
  camera.position.z =150;
  camera.up.x = 0;
  camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸
  camera.up.z = 0;
  camera.lookAt({ //相機(jī)的中心點(diǎn)
   x : 0,
   y : 0,
   z : 0
  });
   
  // camera 正交相機(jī)
  /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
  camera.position.x = 250;
  camera.position.y = 100;
  camera.position.z = 1800;
  camera.up.x = 0;
  camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸
  camera.up.z = 0;
  camera.lookAt({ //相機(jī)的中心點(diǎn)
   x : 0,
   y : 0,
   z : 0
  });*/
  }
  
  function initLight(){
  // light--這里使用環(huán)境光
  //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
  //light.position.set(600, 1000, 800);
  var light = new THREE.AmbientLight(0xffffff); //模擬漫反射光源
  light.position.set(600, 1000, 800); //使用Ambient Light時(shí)可以忽略方向和角度，只考慮光源的位置
  scene.add(light);
  }
  function initObject(){ //初始化對(duì)象
   
  //初始化地板
  initFloor();
  }
  function initGrid(){ //輔助網(wǎng)格
  var helper = new THREE.GridHelper( 1000, 50 );
  helper.setColors( 0x0000ff, 0x808080 );
  scene.add( helper );
  }
  
  function initFloor(){
  //創(chuàng)建一個(gè)立方體
  var geometry = new THREE.BoxGeometry(80, 20, 80);
   for ( var i = 0; i < geometry.faces.length; i += 2 ) {
   var hex = Math.random() * 0xffffff;
   geometry.faces[ i ].color.setHex( hex );
   geometry.faces[ i + 1 ].color.setHex( hex );
  }
  var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  //將material材料添加到幾何體geometry
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position = new THREE.Vector3(0,0,0);
  scene.add(mesh);
  }
 
  
  //初始化頁面加載
  function threeStart(){
  //初始化渲染器
  initThree();
  //初始化場(chǎng)景
  initScene();
  //初始透視化相機(jī)
  initCamera();
  //初始化光源
  //initLight();
  //模型對(duì)象
  initObject();
  //初始化網(wǎng)格輔助線
  initGrid();
  //renderer.render(scene, camera);
  //實(shí)時(shí)動(dòng)畫
  animation();
  
  }
  /*
  * 旋轉(zhuǎn)原理
  * 相機(jī)圍繞y軸旋轉(zhuǎn)
  * 不斷修改相機(jī)x、z軸位置，并且保持場(chǎng)景中的物體一直再相機(jī)的視野中，
  * 實(shí)時(shí)將相機(jī)拍攝下來的圖片，放到瀏覽器中去顯示
  */
  function animation(){
  //渲染成像
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100; //相機(jī)位置x軸方向
  camera.position.z = Math.sin(timer)*100; //相機(jī)位置y軸方向
  //設(shè)置相機(jī)視野中心
  camera.lookAt(scene.position);
  //渲染成像
  renderer.render(scene, camera);
  //渲染回調(diào)animation函數(shù)
  requestAnimationFrame(animation);
  }
 </script>
</html>

至此完畢，附上個(gè)人繪制思路流程圖