three.js深入浅出

2023-03-30 18:58| 来源: 网络整理| 查看: 265

从简入繁的教大家使用three.js。阅读本篇文章&＃xff0c;你可学到以下知识 three.js的基本概念(渲染器,场景, 照相机, 光照)加载3d模型控制3d模型旋转1.首先我们生成一个渲染器

const renderer &＃61; new WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)

new WebGLRenderer会在body里面生成一个canvas标签,当然如果你想在某个位置插入canvas可以在指定的dom元素appendChild(renderer.domElement)

setPixelRatio是为了兼容高清屏幕&＃xff0c;在高清屏幕上绘图&＃xff0c;会出现绘图不清晰的问题&＃xff0c;设置setPixelRatio就好了

2. 生成一个场景&＃xff0c;我们的物体都需要添加到场景中

const scene &＃61; new Scene()scene.background &＃61; new Color(0x333333)

3.生成一个照相机

首先我们来了解一下three.js的坐标

屏幕的中心&＃xff0c;就是坐标(0,0,0)

用户所能看到的场景&＃xff0c;需要通过照相机来呈现&＃xff0c;相当于人的眼睛&＃xff0c;照相机分为两种一种是正交投影照相机&＃xff0c;一种是透视投影照相机&＃xff0c;它们之间最大的区别是透视投影照相机会根据照相机位置的远近&＃xff0c;物体会改变大小&＃xff0c;更接近于人眼&＃xff0c;在这里我们使用透视投影照相机(PerspectiveCamera)。

const camera &＃61; 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是指照相机的镜头往哪里聚焦&＃xff0c;在这里指向0&＃xff0c;0&＃xff0c;0点4.设置光源

如同自然界要有光一样&＃xff0c;我们要设置光源&＃xff0c;才能看到物体。这里我们使用平行光&＃xff0c;可参考太阳光。

const light &＃61; new DirectionalLight()light.position.set(0, 20, 20)this.camera.add(light)

position是指光往哪个地方照射我们要把光添加到相机中(重点)&＃xff0c;这样当我们旋转物体的时候&＃xff0c;就不会出现物体的一面是昏暗的了5.下面进入本章重点: 加载3d模型

首先&＃xff0c;先装一个引人模型的loader

npm i three-obj-loader

把一个.obj格式的3d模型加载进来就好了

const loader &＃61; new THREE.OBJLoader()loader.load(&＃39;assets/chair.obj&＃39;, obj &＃61;> {obj.traverse(child&＃61;> {if (child instanceof Mesh) {child.material.side &＃61; THREE.DoubleSidethis.scene.add(obj)}})})

把模型加载进来后要添加到场景中(this.scene.add(obj))6.进行到这一步就差不多完成了,还差最后一步&＃xff0c;实现模型随着手指的移动而转动&＃xff0c;原理其实很简单&＃xff0c;改变相机的位置就可以了&＃xff0c;这里我们用一个库实现。

首先安装一下这个库

npm i three-orbit-controls

然后

const controls &＃61; this.controls &＃61; new OrbitControls(this.camera)controls.maxPolarAngle &＃61; 1.5controls.minPolarAngle &＃61; 0.5controls.rotateSpeed &＃61; 5.0controls.zoomSpeed &＃61; 5controls.panSpeed &＃61; 2controls.onZoom &＃61; falsecontrols.noPan &＃61; falsecontrols.staticMoving &＃61; truecontrols.dynamicDampingFactor &＃61; 0.3controls.minDistance &＃61; 10controls.maxDistance &＃61; 800

maxPolarAngle和minPolarAngle可以限制旋转的角度7.最后&＃xff0c;当相机旋转的时候更新一下

window.requestAnimationFrame(this.animate)this.controls.update()this.render()

大功告成&＃xff01; 代码放在github上了&＃xff0c;请在移动端运行此项目&＃xff0c;点击跳转:完整代码后记:

原文地址

后面会写一篇three.js的高级应用&＃xff0c;比如

粒子效果着色器光晕点击事件的处理

感兴趣的同学也可以抢先看代码&＃xff1a;

高级应用

原创辛苦&＃xff0c;觉得还不错请点个star哦

【本文地址】

three.js深入浅出

three.js深入浅出

今日新闻

推荐新闻