DAY 14. Three.js 初探

2018鐵人賽 javascript three.js

Cian

2017-12-17 21:36:31

2566 瀏覽

分享至

DAY 14. Three.js 初探

用來建立3D場景的函數庫其實很多，Three.js是其中之一
關於Three.js的介紹網路上有很多，在此就不多贅述
直接從應用層面說起。

首先到 Three.js GitHub 下載, 或使用 CDN來取得three.js。

HTML

<html>
<head>
  ...
</head>
<body>
  ...
  <script src="/dist/three.js"></script>
  <script src="/dist/app.js"></script>
</body>
</html>

app.js


// 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個元件使用細節。