首頁 > 文章 > web前端 > Three.js基礎入門學習教程

Three.js基礎入門學習教程

小云云原創: 2018-01-18 14:22:343931瀏覽

本文主要為大家詳細介紹了Three.js基礎學習教程，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

一、Three.js官網及使用Three.js必備的三個條件

1.Three.js 官網https://threejs.org/

2.使用Three.js必備的三個條件

(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可以實現任何顯示的東西，必須滿足三個條件: a scene場景、a camera相機、a renderer渲染器. 三者缺一不可。

二、使用Three.js必備三個條件（a scene場景、a camera相機、a renderer渲染器）之間的關係　

#如上圖所示，來說明a scene場景、a camera相機、a renderer渲染器三者之間關係[/code]

1.場景scene是一個物體的容器【通俗理解裝東西的嘛】，開發者可以將需要的角色放入場景中，例如蘋果，葡萄。同時，角色本身也管理著在場景中的位置。

2.相機camera的作用就是面對場景，在場景中取一個合適的景，把它拍下來。【可以想像成人的眼睛】

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

三、透過上述理論來實踐官網案例

效果圖如下

#官網案例實作原始碼

<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>
  //创建一个场景对象
  var scene = new THREE.Scene();
  //创建一个相机对象
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
  //创建一个渲染器对象
  var renderer = new THREE.WebGLRenderer(); 
  //设置画布尺寸
  renderer.setSize( window.innerWidth, window.innerHeight );
  //设置画布色
   renderer.setClearColor(0x00AABB, 1.0);
   //将渲染画布添加到浏览器中，以便后面剩放相机拍下的景
  document.body.appendChild( renderer.domElement );
  
  //创建一个几何体长、宽、高分别为1几何体对象
  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  //材料、皮肤
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  //将material材料添加到几何体geometry，产生新的对象几何体cube
  var cube = new THREE.Mesh( geometry, material );
  //将几何体添加至场景中
  scene.add( cube );
  //设置相机z轴，垂直电脑屏幕位置
  camera.position.z = 5;
   
  var render = function () {
  /*requestAnimationFrame( render ); //循环渲染
  cube.rotation.x += 0.1; //x轴每秒旋转60次
  cube.rotation.y += 0.1;//y轴每秒旋转60次*/
  renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中
  };
  render();
</script>
 </body>
</html>

透過官網案例不難發現，camera照相機預設的觀察方向是螢幕的方向(z軸負方向),當變化座標以後，就要將照相機指向原點，才能觀察到物體

z軸負方向？？？因此這裡很有必要說說三維座標（如下圖）

照相機指向原點？？？來說說相機camera相機（很重要!!想像一下人看不到東西是什麼感覺）.

案例中採用透視相機（從視點開始越近的物體越大、遠處的物體繪製的較小的一種方式、和日常生活中我們看物體的方式是一致的。

new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機

視野角：fov 這裡視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大

縱橫比：aspect相機離視體積最近的距離：near
相機離視體積最遠的距離：far
綜上，相信結合上述三維座標、相機圖理解相機、就應該變得很簡單咯哦.接下來接著修改上述案例（說明後面案例滑鼠滾動放大縮小、三維旋轉都是基於相機來實現的）

四、將官網案修改且設定相機朝向及相機位置

利用[lookAt]方法來設定相機的視野中心。 “lookAt()”的參數是一個屬性包含中心座標“x”“y”“z”的物件。

設定相機的上方向為正方向y軸camera.up.x = 0; camera.up.y = 1/*相機朝向--相機上方為y軸*/; camera. up.z = 0;

五、實現旋轉立方體

#旋轉動畫原理相機圍繞y軸旋轉，不斷修改相機x、z軸位置，並且保持場景中的物件一直再相機的視野中，即時將相機拍攝下來的圖片，放到瀏覽器中去顯示

//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
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); //设置相机视野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回调函数
}

實現效果圖如下所示

旋轉立方體－案例原始碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>旋转立方体 </title>
 <style>
  #canvas-frame {
  width: 100%;
  height: 600px;
  }
 </style>
 </head>
 <body onload="threeStart()">
 <p id="canvas-frame" ></p>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
  var renderer, //渲染器
  width = document.getElementById(&#39;canvas-frame&#39;).clientWidth, //画布宽
  height = document.getElementById(&#39;canvas-frame&#39;).clientHeight; //画布高
  //初始化渲染器
  function initThree(){
  renderer = new THREE.WebGLRenderer({
   antialias : true
   //canvas: document.getElementById(&#39;canvas-frame&#39;)
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0xFFFFFF, 1.0);
  document.getElementById(&#39;canvas-frame&#39;).appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
  }
  //初始化场景
  var scene;
  function initScene(){
  scene = new THREE.Scene();
  }
  var camera;
  function initCamera() { //透视相机
  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; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });
   
  // camera 正交相机
  /*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; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });*/
  }
  
  function initLight(){
  // light--这里使用环境光
  //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时可以忽略方向和角度，只考虑光源的位置
  scene.add(light);
  }
  function initObject(){ //初始化对象
   
  //初始化地板
  initFloor();
  }
  function initGrid(){ //辅助网格
  var helper = new THREE.GridHelper( 1000, 50 );
  helper.setColors( 0x0000ff, 0x808080 );
  scene.add( helper );
  }
  
  function initFloor(){
  //创建一个立方体
  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();
  //初始化场景
  initScene();
  //初始透视化相机
  initCamera();
  //初始化光源
  //initLight();
  //模型对象
  initObject();
  //初始化网格辅助线
  initGrid();
  //renderer.render(scene, camera);
  //实时动画
  animation();
  
  }
  /*
  * 旋转原理
  * 相机围绕y轴旋转
  * 不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，
  * 实时将相机拍摄下来的图片，放到浏览器中去显示
  */
  function animation(){
  //渲染成像
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100; //相机位置x轴方向
  camera.position.z = Math.sin(timer)*100; //相机位置y轴方向
  //设置相机视野中心
  camera.lookAt(scene.position);
  //渲染成像
  renderer.render(scene, camera);
  //渲染回调animation函数
  requestAnimationFrame(animation);
  }
 </script>
</html>

至此完畢，附上個人繪製想法流程圖

Three.js基礎入門學習教程

相關文章