模型特效是大家在3d可视化项目所追求的，但很多人苦于无法实现一个好的模型效果，本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格。话不多说，先上效果：
本文所使用的的相关功能模块：
- 3d模型场景加载
- 模型材质修改
- shaderMaterial生成扫描特效
- unrealBloom实现发光效果
- 模型压缩优化
项目地址：
https://59.110.7.171:9999/
由于模型较大，服务器拉胯，所以模型替换成较小的模型了，效果要差一点，大家凑活看看
代码地址：
github.com/voidjay/lig…
3d模型场景加载
准备一个模型，搭建一个基本的threejs场景。
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
let renderer,scene,camera,controls
// 初始化场景对象
const init = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(5, 5, 5);
camera.layers.enable(1);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1000);
scene.add(new THREE.AmbientLight(0xffffff, .5));
loadGLTF('./racingCar2.glb').then(function(obj){
scene.add(obj)
renderSelect(obj)
})
}
// 加载模型
const loadGLTF = async function(path) {
var loader = new GLTFLoader();
var obj = await loader.loadAsync(path);
return obj.scene;
}
// 渲染器
function render() {
renderer.render(scene, camera);
controls.update()
requestAnimationFrame(render);
}
init()
render()
threejs的渲染结构如下图所示：
scene（场景） :所有3d对象的容器，相当于现实中的世界。
camera（相机） : 相机是观察者，相当于现实中的眼睛。常用的相机有两种，分别是 正交投影相机(OrthographicCamera) 和 透视投影相机(PerspectiveCamera) ， 在3d场景下基本都使用透视相机，透视相机有四个参数，分别如下：
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
controls（控制器） :控制器用于调整相机的位置，有了控制器就可以自由地移动视角观察模型了。
r enderer（渲染器） :用于渲染场景，webgl渲染是一帧一帧渲染的，每调用一次renderer.render(scene, camera)方法，就会重新渲染一次场景，一般情况下requestAnimationFrame每秒调用60次，因此场景渲染频率为60帧。
light(灯光)： 人之所以能看到物体，都是由于光反射到眼睛里的，因此没有灯光场景都是黑暗的。常用的光源种类有四种，分别为：环境光（AmbientLight），平行光（DirectionalLight），点光源（PointLight），聚光灯（SpotLight）。
网格对象（Mesh）: 网格对象由几何体（Geometry） 和材质（Material） 两部分组成，Geometry 负责几何模型，Material 负责外观样式。我们加载的模型可以看成一个组（Group） ，一个复杂的模型是由多个网格组合而成的，每个网格对象则相当于汽车的独立零件。
几何对象（Geometry ）: 几何体对象负责外形，其内部存储了顶点相关的数据，比如顶点点位、顶点索引、uv坐标等。threejs中内置了许多常用的几何体如：正方体，圆柱体，球体等，我们可通过threejs内置的几何对象构建一个简单的模型，而复杂的模型则需要建模师去建模。
材质对象（Material）: 材质对象负责着色，绘制几何体的表面属性，比如漫反射、镜面反射、光泽度、凹凸等。材质对象的许多属性都可以用纹理贴图表示，比如漫反射贴图、凹凸贴图等。
基于以上元素我们就可以搭建一个基本场景了，当然，仅仅拥有一个场景是远远不够的，完成一个项目还需要给模型添加交互，特效等等，我会在后续继续进行讲解。
下一篇链接：juejin.cn/post/710650…
欢迎关注我的公众号获取最新文章及源码，您也可以添加我的微信进行沟通交流:
本人公众号：web前端可视化
本人微信号：voidjay
