Three.js 觀念介紹

要去呈現 three.js 的畫面需要至少這三個要素

  1. scene (場景)
  2. camera (攝影機)
  3. renderer (渲染器)
產生物件三要素
  1. geometry: three.js 中的物件, 包含所有的點跟面
  2. material: 幫 geometry 加上顏色
  3. 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 中


留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

[翻譯] 介紹現代網路負載平衡與代理伺服器