从简入繁的教大家使用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哦