用來建立3D場景的函數庫其實很多,Three.js
是其中之一
關於Three.js
的介紹網路上有很多,在此就不多贅述
直接從應用層面說起。
首先到 Three.js GitHub 下載, 或使用 CDN來取得three.js。
<html>
<head>
...
</head>
<body>
...
<script src="/dist/three.js"></script>
<script src="/dist/app.js"></script>
</body>
</html>
// 1.建立場景 Scene
let scene = new THREE.Scene()
// 2.建立相機 Camera
let camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
)
// 3.建立渲染器 Renderer
let renderer = window.WebGLRenderingContext ?
new THREE.WebGLRenderer() : new THREE.CanvasRenderer()
// 4.設定渲染器渲染範圍
renderer.setSize(window.innerWidth, window.innerHeight)
// 5.將渲染元素加入 body
document.body.appendChild(renderer.domElement)
// 6.建立矩形 Geometry
let geometry = new THREE.CubeGeometry(1, 1, 1)
// 7.建立材質 Material
let material = new THREE.MeshNormalMaterial()
// 8.使用以上矩形與材質, 將其實例化成一個方塊
let cube = new THREE.Mesh(geometry, material)
// 9.將方塊加入場景
scene.add(cube)
// 10.使用渲染器渲染場景
renderer.render(scene, camera)
以上簡單的10個步驟已經在該html中建立3D元素, 並且渲染
但結果並不令人滿意, 因為畫面將會是黑色且無任何內容
因為此時的我們的相機camera與方塊cube都在該場景scene的中間
所以我們不會看到任何東西
因此必須做點調整
// 在步驟二後面加上相機位置, 以及調整相機監視位置
// 2.建立相機 Camera
let camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
)
// 加上以下內容
camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
camera.lookAt(new THREE.Vector3(0, 0, 0))
如此一來就會有一個帶有法向量顏色的方塊在我們場景scene中。
以上範例是實作3D的幾個重點
步驟1 ~ 步驟5 是每個3D環境都必須建立的前置作業
步驟6 ~ 步驟 9 是一個實作3D物件並加入場景scene的範例
步驟10是渲染畫面使內容呈現的關鍵, 少了這個步驟畫面不會出現任何東西
第一個關於three.js
的主題快速帶大家導覽了一下建立3D場景的步驟
在這之後會寫一些關於three.js
個元件使用細節。