three.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的座標

屏幕的中心，就是座標(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哦