Three.js學習1_快速入門

隨遇丿而安發表於2020-08-30
JS

快速上手, 搭建第一個3D場景

　　最重要的一步, 先下載three.js, 引入網頁中 <script src="./three.js"></script>

　　效果圖:

　　 

1. 五大因素

　　搭建一個場景必須要的五大因素, 場景, 相機, 光源, 物體, 渲染器

　　結合生活, 場景就是我們身處的環境, 相機是我們的眼睛, 光源和物體見名知意, 渲染器是將我們看到的渲染到網頁上, 五大因素也就這樣, 那開始搭建環境吧! 

2. 開始搭建環境

　　在搭建環境前, 為了使影像渲染在整個網頁上, 需要設定

1 body{
2         margin: 0;
3         /* 消除body外間距 */
4         overflow: hidden;
5         /* 作用是消除網頁右方滾動條*/
6 }

　　

第一步, 建立場景

1 　　 let scene = new THREE.Scene();

第二步, 建立光源

1     let light = new THREE.AmbientLight(0x666666);
2     scene.add(light);

　　注意點: 光源, 相機, 物體都是需要放進場景中, 結合實際更容易想

第三步, 建立相機

1     let camera = new THREE.PerspectiveCamera(
2         45,
3         window.innerWidth / window.innerHeight,
4         1, 1000 );
5     scene.add( camera );
6     camera.position.set(2, 2, 2);
7     camera.lookAt(scene.position);

　　注意點:

　　1-4行建立相機, 5行將相機新增至場景中, 6行表示將相機放在座標(2,2,2)處, 場景座標為(0,0,0), 7行表示相機看向原點

第四步, 建立物體

1     let cube = new THREE.Mesh(
2         new THREE.BoxGeometry( 1, 1, 1 ),
3         new THREE.MeshLambertMaterial( {
4             color: 0xf00ff0,
5             // wireframe: true
6         } )
7     );
8     scene.add(cube);

　　注意點:

　　1-7行建立一個長寬高為1的正方體  (這裡提個問題, 在three.js中, 是以什麼為一個單位, m, dm, cm?)

第五步, 建立渲染器

1     let renderer = new THREE.WebGLRenderer();
2     renderer.setClearColor(0xffffff);
3     renderer.setSize(window.innerWidth, window.innerHeight);
4     document.body.appendChild(renderer.domElement);

　　解釋:

　　1行建立渲染器, 4行, 將渲染器表示為一個元素加入到網頁中, 之後渲染位置, 從這個元素開始.　　23兩行分別設定背景顏色和渲染尺寸

第六步, 建立重新整理函式

　　想象一下游戲, 每一秒場景都會不同, 某個時刻的場景對應一張圖片, 也就是一幀, 瀏覽器也需要不停重新整理圖片, 不停重新整理幀, 這樣才能看到動畫效果

1     render();
2     function render() {
3         renderer.render(scene, camera);
4         requestAnimationFrame(render);
5     }

　　解釋:

　　1行呼叫函式, 2行定義函式, 3行渲染一幀影像(一張影像), 4行向瀏覽器發起重新執行render函式的請求, 不斷反覆

OK! 程式碼完成

完整程式碼如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9             /* 消除body外間距 */
10             overflow: hidden;
11             /* 作用是消除網頁右方滾動條*/
12         }
13     </style>
14     <script src="../build/three.js"></script>
15 </head>
16 <body>
17 <script>
18     let scene = new THREE.Scene();
19 
20     let camera = new THREE.PerspectiveCamera(
21         45,
22         window.innerWidth / window.innerHeight,
23         1, 1000 );
24     scene.add( camera );
25     camera.position.set(2, 2, 2);
26     camera.lookAt(scene.position);
27 
28     let light = new THREE.AmbientLight(0x666666);
29     scene.add(light);
30 
31     let cube = new THREE.Mesh(
32         new THREE.BoxGeometry( 1, 1, 1 ),
33         new THREE.MeshLambertMaterial( {
34             color: 0xf00ff0,
35             // wireframe: true
36         } )
37     );
38     scene.add(cube);
39 
40     let renderer = new THREE.WebGLRenderer();
41     renderer.setClearColor(0xffffff);
42     renderer.setSize(window.innerWidth, window.innerHeight);
43     document.body.appendChild(renderer.domElement);
44 
45     render();
46     function render() {
47         renderer.render(scene, camera);
48         requestAnimationFrame(render);
49     }
50 </script>
51 
52 </body>
53 </html>

 

相關文章