Day9. 幾何體

14th鐵人賽 three.js javascript

Yingge170

團隊來啊!打摳啊!

2022-09-13 12:12:34

1019 瀏覽

分享至

在3D的世界中，所有物件都是由 Geometry(幾何體)＋ Material(材質) 所組成。

幾何體種類

幾何體跟材質一樣分很多種類如常見的

種類	簡介	建構函數
BoxGeometry 立方體	以原點為中心，設定寬度、高度、深度	`BoxGeometry(width:Float,height:Float,depth:Float)`
SphereGeometry 球體	以原點為中心，設定半徑、水平線段數量、垂直線段數量	`SphereGeometry(radius:Float, widthSegments:Integer,heightSegments:Integer)`
CylinderGeometry 圓柱體	設定頂部半徑、底部半徑、高度、圍繞圓柱體的分段面數	`CylinderGeometry(radiusTop:Float, radiusBottom:Float,height:Float,radialSegments:Integer)`
PlaneGeometry 平面	設定寬度、高度	`PlaneGeometry(width : Float, height : Float)`
ConeGeometry 錐體	設定半徑、高度、圍繞錐體的分段面數	`ConeGeometry(radius : Float, height : Float, radialSegments : Integer)`
wireframe 線框	可以用來輔助將幾何體轉為線框	`WireframeGeometry( geometry : BufferGeometry)`

設定完幾何體後也可以透過clone或copy的方式新增已設定好的幾何體，就不用重複做工

Clone : 創建一個完全一樣的新物體
Copy : 複製其中的屬性給指定對象

  // 創建cube
  const geometry = new THREE.BoxGeometry( 1, 1, 1 );
  const material = new THREE.MeshBasicMaterial( {color: 0xffff30} );
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

clone 一個一樣的 cube 到右邊

  // clone cube
  var cube_clone = cube.clone()
  cube_clone.position.set(5,0,0)
  scene.add(cube_clone)

儘管有先設定不同的顏色，但經過 copy 後就會複製原本的顏色屬性

  // copy cube
  var sphere_geo = new THREE.SphereGeometry(1,16,5)
  var sphere_material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  sphere_material.copy(material)
  const sphere = new THREE.Mesh( sphere_geo,sphere_material);
  sphere.position.set(-5,0,0)
  scene.add(sphere)