超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)

前言

模型特效是大家在3d可视化项目所追求的，但很多人苦于无法实现一个好的模型效果，本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格。话不多说，先上效果：

本文所使用的的相关功能模块：

1. 3d模型场景加载

2. 模型材质修改

3. shaderMaterial生成扫描特效

4. unrealBloom实现发光效果

5. 模型压缩优化

项目地址：

http://59.110.7.171:9999/

文末点击查看原文获取源码

---

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）😗*材质对象负责着色，绘制几何体的表面属性，比如漫反射、镜面反射、光泽度、凹凸等。材质对象的许多属性都可以用纹理贴图表示，比如漫反射贴图、凹凸贴图等。

基于以上元素我们就可以搭建一个基本场景了，当然，仅仅拥有一个场景是远远不够的，完成一个项目还需要给模型添加交互，特效等等，我会在后续继续进行讲解。

---

欢迎关注我的公众号获取webgl资料及最新文章，您也可以添加我的微信进行沟通交流:
公众号：web前端可视化
微信：voidjay