Three.js 觀念介紹
要去呈現 three.js 的畫面需要至少這三個要素
- scene (場景)
- camera (攝影機)
- renderer (渲染器)
產生物件三要素
- geometry: three.js 中的物件, 包含所有的點跟面
- material: 幫 geometry 加上顏色
- mesh: 把 material 應用到 geometry 上面,可以直接把 mesh 放到 scene 中,讓 mesh 可以在 scene 中自由的移動
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
上面程式碼的意思是產生一個 BoxGeometry
產生一個 0x00ff00 顏色的 material
產生一個可以放在 scene 中的 mesh, mesh 將 geometry 與 material 組合成一個可以在場景中自由控制的物件,並加入到 scene 中
產生一個 0x00ff00 顏色的 material
產生一個可以放在 scene 中的 mesh, mesh 將 geometry 與 material 組合成一個可以在場景中自由控制的物件,並加入到 scene 中
留言
張貼留言