DAY 18 Three.js 幾何 Geometry

幾何 Geometry

3D場景中所看到的任何物件都是幾何Geometry加上材質Material的呈現
首先來認識一下在three中我們有哪些預設幾何Geometry可用

• 二維幾何
  • 平面幾何 PlaneGeometry
  • 圓幾何 CircleGeometry
  • 自定義 ShapeGeometry
• 三維幾何
  • 方塊 CubeGeometry
  • 球體 SphereGeometry
  • 圓柱 CylinderGeometry
  • 圓環 TorusGeometry
  • 扭結 TorusKnotGeometry
  • 多面 PolyhedronGeometry
  • 4面 TetrahedronGeometry
  • 20面 IcosahedronGeometry

更多的其他幾何可以在 three.js/examples/js/geometries 找到

接著我們使用實際程式範例來介紹幾個基本幾何Geometry

/** 這部分程式為所有範例共用 */
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, .1 , 1000
)
camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
camera.lookAt(new THREE.Vector3(0, 0, 0))

let renderer = window.WebGLRenderingContext ? 
               new THREE.WebGLRenderer() : new THREE.CanvasRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(new THREE.Color('rgb(255, 255, 255)'))

document.body.appendChild(renderer.domElement)

animationRender()

function render() {
  renderer.render(scene, camera)
}

function animationRender() {
  render()
  requestAnimationFrame(animationRender)
}

###2D平面幾何 PlaneGeometry

/** 繪製一個2D平面幾何plane並加入場景scene */
// PlaneGeometry(width, height, [widthSegment, heightSegment])
let planeGeometry = new THREE.PlaneGeometry(3, 3, 1, 1)
let planeMaterial = new THREE.MeshNormalMaterial()
let plane = new THREE.Mesh(planeGeometry, planeMaterial)
scene.add(plane)

我們將會在畫面中看到一個直立的2D平面圖, 但由於相機視角的緣故, 平面並不在畫面正中央, 我們接著對這個範例做點調整

camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
// 改為
camera.position.x = 0
camera.position.y = 0
camera.position.z = 3

此時畫面將呈現一個完全正面2D平面, 你可以多把玩幾次x, y, z屬性來體會它的運作
此範例的最後, 我們讓2D平面以x軸Axis旋轉90度, 來取得一面平躺的2D平面

// ... 略
plane.rotation.x = -Math.PI * .5
scene.add(plane)

如果 camera的position都設為0的話會因為角度的緣故而看不到平面

###2D圓幾何 CircleGeometry

// ... 略
// CircleGeometry(radius, [segments, thetaStart, thetaLength])
let circleGeometry = new THREE.CircleGeometry(1)
let circleMaterial = new THREE.MeshNormalMaterial()
let circle = new THREE.Mesh(circleGeometry, circleMaterial)
circle.rotation.x = -Math.PI * .5  // 以X軸為軸心, 旋轉90度使其平躺
scene.add(circle)

這個範例將會生成一個平躺於場景之中的2D圓幾何

###3D方塊 CubeGeometry

// ... 略
// CubeGeometry(width, height, depth, [widthSegments, heightSegments, depthSegments])
let cubeGeometry = new THREE.CubeGeometry(1, 1, 1)
let cubeMaterial = new THREE.MeshNormalMaterial()
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

這個範例將會建立一個尺寸 1 * 1 * 1 的方塊cube在場景中

###3D球體 SphereGeometry

// ... 略
// SphereGeometry([radius, widthSegments, heightSegment, phiStart, phiLength, thetaStart, thetaLength])
let sphereGeometry = new THREE.SphereGeometry(1)
let sphereMaterial = new THREE.MeshNormalMaterial()
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)

這個範例將會建立一半徑長度單位為1的3D球體於場景中

以上是最基本的幾何體建立方式, 範例中不難發現, 一個物件要新增於場景scene
有基本4個步驟

1. 初始化幾何Geometry
2. 初始化材質Material
3. 建立網格Mesh
4. 加入場景scene.add()

在實際場合中, 通常我們會使用很複雜的幾何, 而一般來說它會使用3D建置軟體來製作，諸如3D max、blender等3D軟體, 然後將其轉成three.js可讀得格式在做使用

然而將這些外部模組放入three的場景scene的步驟是一樣的。

你可能會注意到在範例中我僅用MeshNormalMaterial 素材, 那是因為到目前為止我想盡可能簡化範例中的不同之處, 讓讀者專注於Geometry的部分。