iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
0
Modern Web

重新學習網頁設計系列 第 18

DAY 18 Three.js 幾何 Geometry

  • 分享至 

  • xImage
  •  

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的部分。


上一篇
DAY 17. Three.js 光源 Light
下一篇
DAY 19. Three.js 材質 Material
系列文
重新學習網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言