Threes.js入門篇之2 - Hello World

allenjiao發表於2018-03-14
JS

與OpenGL一樣，Three.js 符合右手座標系，X軸向右，Y軸向上，Z軸朝外：

        

       Three.js 的繪製流程可以描述為：

1. 生成 渲染器 - THREE.WebGLRenderer，並繫結Canvas繪圖畫布

2. 建立 場景管理器 - THREE.Scene，管理場景物件（場景樹）

    生成場景物件THREE.mesh，新增到場景管理器

3. 建立 相機 - THREE.PerspectiveCamera，該相機支援透視投影

    將相機新增到場景管理器

4. 渲染器 呼叫 場景器管理器 和 相機，執行渲染操作

      參考程式碼如下（run 一下看看效果吧，可以調整下相機位置 - 比如z值，看看目標大小如何變化 ）：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Hello World! - linol</title>  
  6.     <script type="text/javascript" src="three.js"></script>  
  7. </head>  
  8. <body onload="init()">  
  9.     <canvas id="Canvas3D" width="352" height="288"/>  
  10.     <script type="text/javascript">  
  11.         function init(){  
  12.             // render - attach canvas  
  13.             var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('Canvas3D')});  
  14.   
  15.             // scene  
  16.             var scene = new THREE.Scene();  
  17.             var sphere = new THREE.Mesh( new THREE.SphereGeometry(3,4), new THREE.MeshBasicMaterial({color: 0x00FF00}) );  
  18.             scene.add(sphere);  
  19.   
  20.             // camera  
  21.             var camera = new THREE.PerspectiveCamera(45, 4/3, 1, 1000); // 1.33 Fov  
  22.             camera.position.set(0, 0, 10);  
  23.             scene.add(camera);  
  24.   
  25.             renderer.render(scene, camera);  
  26.      }  
  27.     </script>  
  28. </body>  
  29. </html>  

相關文章