three.js深入淺出

shen1992君發表於2017-12-14
JS

從簡入繁的教大家使用three.js。閱讀本篇文章，你可學到以下知識

  • three.js的基本概念(渲染器,場景, 照相機, 光照)
  • 載入3d模型
  • 控制3d模型旋轉

1.首先我們生成一個渲染器

const renderer = new WebGLRenderer() 

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

renderer.setPixelRatio(window.devicePixelRatio)

複製程式碼

  • new WebGLRenderer會在body裡面生成一個canvas標籤,當然如果你想在某個位置插入canvas可以在指定的dom元素appendChild(renderer.domElement)

  • setPixelRatio是為了相容高清螢幕，在高清螢幕上繪圖，會出現繪圖不清晰的問題，設定setPixelRatio就好了

2. 生成一個場景，我們的物體都需要新增到場景中

const scene  = new Scene()
scene.background = new Color(0x333333)
複製程式碼

3.生成一個照相機

首先我們來了解一下three.js的座標

image

螢幕的中心，就是座標(0,0,0)

使用者所能看到的場景，需要通過照相機來呈現，相當於人的眼睛，照相機分為兩種一種是正交投影照相機，一種是透視投影照相機，它們之間最大的區別是透視投影照相機會根據照相機位置的遠近，物體會改變大小，更接近於人眼，在這裡我們使用透視投影照相機(PerspectiveCamera)。

const camera  = new PerspectiveCamera(70, this.options.width/this.options.height, 1, 10000)
camera.position.set(150, 250, 300)
camera.lookAt(new Vector3(0, 0, 0))
this.scene.add(camera)
複製程式碼
  • lookAt是指照相機的鏡頭往哪裡聚焦，在這裡指向0，0，0點

4.設定光源

如同自然界要有光一樣，我們要設定光源，才能看到物體。這裡我們使用平行光，可參考太陽光。

const light  = new DirectionalLight()
light.position.set(0, 20, 20)
this.camera.add(light)
複製程式碼
  • position是指光往哪個地方照射
  • 我們要把光新增到相機中(重點)，這樣當我們旋轉物體的時候，就不會出現物體的一面是昏暗的了

5.下面進入本章重點: 載入3d模型

首先，先裝一個引人模型的loader

npm i three-obj-loader
複製程式碼

把一個.obj格式的3d模型載入進來就好了

const loader = new THREE.OBJLoader()
    loader.load('assets/chair.obj', obj => {
      obj.traverse(child=> {
        if (child instanceof Mesh) {
          child.material.side = THREE.DoubleSide
          this.scene.add(obj)
        }
      })
})
複製程式碼
  • 把模型載入進來後要新增到場景中(this.scene.add(obj))

6.進行到這一步就差不多完成了,還差最後一步，實現模型隨著手指的移動而轉動，原理其實很簡單，改變相機的位置就可以了，這裡我們用一個庫實現。

首先安裝一下這個庫

npm i three-orbit-controls
複製程式碼

然後

const controls = this.controls = new OrbitControls(this.camera)
controls.maxPolarAngle = 1.5
controls.minPolarAngle = 0.5
controls.rotateSpeed = 5.0
controls.zoomSpeed = 5
controls.panSpeed = 2
controls.onZoom = false
controls.noPan = false
controls.staticMoving = true
controls.dynamicDampingFactor = 0.3
controls.minDistance = 10
controls.maxDistance = 800
複製程式碼
  • maxPolarAngle和minPolarAngle可以限制旋轉的角度

7.最後，當相機旋轉的時候更新一下

window.requestAnimationFrame(this.animate)
this.controls.update()
this.render()
複製程式碼

大功告成！

程式碼放在github上了，請在移動端執行此專案，點選跳轉:完整程式碼

後記:

原文地址

後面會寫一篇three.js的高階應用，比如

  • 粒子效果
  • 著色器
  • 光暈
  • 點選事件的處理

感興趣的同學也可以搶先看程式碼：

高階應用

原創辛苦，覺得還不錯請點個star哦

相關文章