threejs安裝與開始

安裝導入

npm

npm i three

導入

並非所有功能都在three，還需從子目錄導入

// three模塊
import * as three from 'three'
// 一些不在three模塊的功能，這裡是OrbitControls導入示例
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

靜態頁面/CDN

three是一個esm模塊，需要按模塊導入方法導入，

// 不是所有瀏覽器都支持ems模塊，這是一個esm模塊相容庫
<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@<version>/build/three.module.js",
			"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
		}
	} </script>
<script type="module">
	import * as THREE from 'three'; const scene = new THREE.Scene()
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

npm包查看

build目錄有5個js文件，大致分為three.js與three.module.js，three.js中提示已經棄用，現在應該使用three.module.js

開始

環境

場景

const scene = new three.Scene()

相機

const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

相機有多種，這裡是透視相機

• 視野角度。就是你能看到的場景範圍
• 寬高比。註意不是寬高，是寬高比，寬高比及解析度在渲染器設置
• 近視距。相機與目標物體小於此值，此物體將不會渲染
• 遠視距。相機與目標物體大於此值，此物體將不會渲染

幀渲染器

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

setSize 函數

• 寬
• 高
• 布爾。預設true，寬高既是高度也是解析度。false 僅設置解析度
  直接設置canvas的寬高後，就不用在這裡設置寬高了，這裡設置解析度就行。

動畫都是基於canvas標簽的，示例中的renderer.domElement就是一個canvas標簽，所以可以直接設置寬高。

動畫編寫

const geometry = new three.BoxGeometry(1, 1, 1)
const material = new three.MeshBasicMaterial({ color: 0xf1f1aa })
const cube = new three.Mesh(geometry, material)

scene.add(cube)
camera.position.z = 5

• 形狀。一個幾何立體形狀
• 材質。一個內置的普通材質
• 物體。創建物體對象
• 添加到場景
• 移動相機。任何物體在場景的初始位置都是(0, 0, 0)，包括相機，所以移動一下相機，不然看不到這個物體，當然，你也可以不移動相機，而去移動物體，這樣

// camera.position.z = 5
cube.position.z = -5

渲染動畫

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.1
  cube.rotation.y += 0.1
  renderer.render(scene, camera)
}
animate()

你將看到一個不斷旋轉的立方體。
rotation 是旋轉屬性
renderer.render() 是一次性的渲染器
requestAnimationFrame(callback) 是屬於window的，輔助渲染動畫的一次性方法。

• 因為一次性，所以需要將你的動畫函數，傳入它的回調參數，且每次都要調用它，以達到不斷變化的動畫效果。
• 我認為它和定時器的功能差不多，我進行嘗試過

function animate() {
  cube.rotation.x += 0.1
  cube.rotation.y += 0.1
  renderer.render(scene, camera)
}
setInterval(() => {
  animate()
}, 20);

不過它是js內置的用來專門渲染動畫的，使用requestAnimationFrame()肯定更好

完整示例

import * as three from 'three'

const scene = new three.Scene()
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.append(renderer.domElement)

const geometry = new three.BoxGeometry(1, 1, 1)
const material = new three.MeshBasicMaterial({ color: 0xf1f1aa })
const cube = new three.Mesh(geometry, material)
scene.add(cube)
camera.position.z = 5

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.1
  cube.rotation.y += 0.1
  renderer.render(scene, camera)
}
animate()