學習ThreeJS

卡优卡1255發表於2024-06-11
JS

建立第一個應用

使用Three JS進行程式設計的時候，都是在呼叫new Three().XXX 來實現方法，讓我們先根據官方文件建立一個demo

https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

那我們需要什麼東西才能讓這個場景build起來呢？

  • 一個相機（camera），一般是使用PerspectiveCamera，因為最接近人的眼睛成像效果，還有正交相機等
    • 75, // fov 垂直方向上視角的大小 field of view
    • window.innerWidth / window.innerHeight, // aspect 縱寬比
    • 0.1, // near
    • 1000 // far
  • 一個場景(scene)
  • 一個渲染器 (renderer)
  • 需要渲染的東西：使用哪種幾何圖形，使用什麼材質？ 這裡演示使用基礎材質（MeshBasicMaterial）和立方體（BoxGeometry）

拿到了所有的例項，接下來可以開始邏輯部分

然後將建立的例項(cube)加入（add）到場景(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)

接著把渲染器加入到瀏覽器的body中：

document.body.appendChild(renderer.domElement)

建立的渲染器其實就相當於appen了一個canvas到dom裡，我們可以調整canvas的大小，這並不是實時resize，如果使用者修改窗體可視大小會留白

留個懸念：可以實時監聽addListener resize？

renderer.setSize(window.innerWidth, window.innerHeight)

由於建立的相機和cube幾何體都預設出現在(0,0,0)的位置，需要對相機在z軸上進行平移

camera.position.z = 5

設定一下地面

// 網格地面
const gridHelper = new THREE.GridHelper(10, 10)
scene.add(gridHelper)

最後把場景和照相機作為引數傳到renderer的render函式里

 renderer.render(scene, camera)

如果想做出一個動畫效果，就像下面程式碼塊一樣加上一個animate函式,這段程式碼每幀都會執行（正常情況下是60次/秒）

function animate() {
  requestAnimationFrame(animate) // 不能寫死迴圈，需要呼叫dom提供的這個動畫幀函式
  // mdn：https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera) // 將renderer渲染的時機放到每一幀的函式呼叫裡
}

animate() //呼叫一下
點選檢視程式碼 
<script>
import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
  75, // fov  垂直方向上視角的大小    field of view
  window.innerWidth / window.innerHeight, // aspect 縱寬比
  0.1, // near
  1000 // far
)
camera.position.z = 5
camera.position.y = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

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)

// 網格地面
const gridHelper = new THREE.GridHelper(10, 10)
cube.position.set(0, 3, 0)
scene.add(gridHelper)

function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()
</script>

相關文章