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哦