threejs渲染高级感可视化风力发电车模型

---

theme: fancy

highlight: atelier-seaside-light

本文使用threejs开发一款风力发电机物联可视化系统，包含着色器效果、动画、补间动画和开发过程中使用模型材质遇到的问题，内含大量gif效果图，

视频讲解及源码见文末

技术栈

• three.js 0.165.0
• vite 4.3.2
• nodejs v18.19.0

效果图

一镜到底动画

切割动画

线稿动画

外壳透明度动画

展开齿轮动画

发光线条动画

代码及功能介绍

着色器

文中用到一个着色器，就是给模型增加光感的动态光影

创建顶点着色器 vertexShader:

glsl varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }

创建片元着色器 vertexShader:

```glsl varying vec2 vUv; uniform vec2 u_center; // 添加这一行

void main() { // 泡泡颜色 vec3 bubbleColor = vec3(0.9, 0.9, 0.9); // 乳白色 // 泡泡中心位置 vec2 center = u_center;
// 计算当前像素到泡泡中心的距离 float distanceToCenter = distance(vUv, center); // 计算透明度，可以根据实际需要调整 float alpha = smoothstep(0.1, 0.0, distanceToCenter);

gl_FragColor = vec4(bubbleColor, alpha);

```

创建着色器材质 bubbleMaterial

```typescript export const bubbleMaterial = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, // 开启透明 depthTest: true, // 开启深度测试 depthWrite: false, // 不写入深度缓冲 uniforms: { u_center: { value: new THREE.Vector2(0.3, 0.3) } // 添加这一行
}, });

```

从代码中可以看到 uniform声明了一个变量u_center，目的是为了在render方法中动态修改中心位置，从而实现动态光效的效果，

具体引用 render 方法中

typescript // 更新中心位置(例如，每一帧都改变) let t = performance.now() * 0.001; bubbleMaterial.uniforms.u_center.value.x = Math.sin(t) * 0.5 + 0.5; // x 位置基于时间变化 bubbleMaterial.uniforms.u_center.value.y = Math.cos(t) * 0.5 + 0.5; // y 位置基于时间变化

官网案例 # Uniform，详细介绍了uniform的使用方法，支持通过变量对着色器材质中的属性进行改变

从模型上可能看不出什么，下面的图是在一个圆球上加的这个效果

着色器中有几个参数可以自定义也可以自己修改，float alpha = smoothstep(0.6, 0.0, distanceToCenter);中的smoothstep 是一个常用的函数，用于在两个值之间进行平滑插值。具体来说，smoothstep(edge0, edge1, x) 函数会计算 x 在 edge0 和 edge1 之间的平滑过渡值。当 x 小于 edge0 时，返回值为 0；当 x 大于 edge1 时，返回值为 1；而当 x 在 edge0 和 edge1 之间时，它返回一个在 0 和 1 之间的平滑过渡值。

切割动画

切割动画使用的是数学库平面THREE.Plane和属性constant，通过修改constant值即可实现动画，从normal法向量起至constant的距离为可展示内容。

从原点到平面的有符号距离。 默认值为 0.

constant取模型的box3包围盒的min值，至max值做补间动画，以下是代码示意

```typescript const wind = windGltf.scene const boxInfo = wind.userData.box3Info;

const max = boxInfo.worldPosition.z + boxInfo.max.z const min = boxInfo.worldPosition.z + boxInfo.min.z

let tween = new TWEEN.Tween({ d: min - 0.2 }) .to({ d: max + 0.1 }, 1000 * 2) .start() .onUpdate(({ d }) => { clippingPlane.constant = d }) ```

详看切割效果图

图中添加了切割线的辅助线，可以通过右侧的操作面板显示或隐藏。

模型材质需要注意的问题

由于齿轮在风车的内容部，并且风车模型开启了transparent=true，那么计算透明度深度就会出现问题，首先要设置 depthWrite = true，开启深度缓存区，renderOrder = -1，

这个值将使得scene graph(场景图)中默认的的渲染顺序被覆盖， 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的，默认值为0。

threejs的透明材质渲染和不透明材质渲染的时候，会互相影响，而调整renderOrder顺序则可以让透明对象和不透明对象相对独立的渲染。

depthWrite对比

renderOrder 对比

自定义动画贝塞尔曲线

众所周知，贝塞尔曲线通常用于调整关键帧动画，创建平滑的、曲线的运动路径。本文中使用的tweenjs就内置了众多的运动曲线easing(easingFunction?: EasingFunction): this;类型，虽然有很多内置，但是毕竟需求是无限的，接下来介绍的方法就是可以自己设置动画的贝塞尔曲线，来控制动画的执行曲线。

具体使用

// 使用示例
const controlPoints = [
    { x: 0 },
    { x: 0.5 },
    { x: 2 },
    { x: 1 }
];
const cubicBezier = new CubicBezier(controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3]);

let tween = new TWEEN.Tween(edgeLineGroup.scale)
.to(windGltf.scene.scale.clone().set(1, 1, 1), 1000 * 2)
.easing((t) => {
    return cubicBezier.get(t).x
})
.start()
.onComplete(() => {
    lineOpacityAction(0.3)
    res({ tween })
})

在tween的easing的回调中添加一个方法，方法中调用了cubicBezier，下面就介绍一下这个方法

源码

typescript [p0] – 起点 [p1] – 第一个控制点 [p2] – 第二个控制点 [p3] – 终点

```typescript export class CubicBezier { private p0: { x: number; }; private p1: { x: number; }; private p2: { x: number; }; private p3: { x: number; };

constructor(p0: { x: number; }, p1: { x: number; }, p2: { x: number; }, p3: { x: number; }) {
    this.p0 = p0;
    this.p1 = p1;
    this.p2 = p2;
    this.p3 = p3;
}

get(t: number): { x: number; } {
    const p0 = this.p0;
    const p1 = this.p1;
    const p2 = this.p2;
    const p3 = this.p3;

    const mt = 1 - t;
    const mt2 = mt * mt;
    const mt3 = mt2 * mt;
    const t2 = t * t;
    const t3 = t2 * t;

    const x = mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x;

    return { x };
}

}

```

类CubicBezier支持get方法，通过四个关键点位信息，绘制三次贝塞尔曲线，参数t在0到1之间变化，当t从0变化到1时，曲线上的点从p0平滑地过渡到p3。

mt = 1 - t;：这是t的补数(1减去t)。 mt2 = mt * mt; 和 mt3 = mt2 * mt;：计算mt的平方和立方。 t2 = t * t; 和 t3 = t2 * t;：计算t的平方和立方。

这是通过取四个点的x坐标的加权和来完成的，其中权重是基于t的幂的。具体来说，p0的权重是(1-t)^3，p1的权重是3 * (1-t)^2 * t，p2的权重是3 * (1-t) * t^2，而p3的权重是t^3。

{ x: 0 },{ x: 0.5 },{ x: 2 },{ x: 1 } 这组数据形成的曲线效果是由start参数到end的两倍参数再到end参数

具体效果如下

齿轮

齿轮动画

模型中自带动画

源码中有一整套的动画播放类方法，HandleAnimation，其中功能包含播放训话动画，切换动画，播放一次动画，绘制骨骼，镜头跟随等功能。

具体使用方法：

typescript // 齿轮动画 /** * * @param model 动画模型 * @param animations 动画合集 */ motorAnimation = new HandleAnimation(motorGltf.scene, motorGltf.animations) // 播放动画 take 001 是默认动画名称 motorAnimation.play('Take 001')

在render中调用

typescript motorAnimation && motorAnimation.upDate()

齿轮展开(补间动画)

补间动画在齿轮展开时调用，使用的tweenjs，这里讲一下定位运动后的模型位置，使用# 变换控制器(TransformControls)，代码中有封装好的完整的使用方法，在TransformControls.ts中，包含同时存在轨道控制器时与变换控制器对场景操作冲突时的处理。

使用方法：

/**
 * @param mesh 受控模型
 * @param draggingChangedCallback  操控回调
 */
 TransformControls(mesh, ()=>{
    console.log(mesh.position)
})

齿轮发光

发光效果方法封装在utls/index.ts中的unreal方法，使用的是threejs提供的虚幻发光通道RenderPass,UnrealBloomPass,以及合成器EffectComposer，方法接受参数如下

```typescript

// params 默认参数 const createParams = { threshold: 0, strength: 0.972, // 强度 radius: 0.21,// 半径 exposure: 1.55 // 扩散 };

/** * * @param scene 渲染场景 * @param camera 镜头 * @param renderer 渲染器 * @param width 需要发光位置的宽度 * @param height 发光位置的高度 * @param params 发光参数 * @returns */ ```

调用方法如下：

```typescript

const { finalComposer: F, bloomComposer: B, renderScene: R, bloomPass: BP } = unreal(scene, camera, renderer, width, height, params) finalComposer = F bloomComposer = B renderScene = R bloomPass = BP bloomPass.threshold = 0

```

除了调用方法还有一些需要调整的地方，比如发光时模型什么材质，又或者不发光时又是什么材质，这里需要单独定义，并在render渲染函数中调用

typescript if (guiParams.isLight) { if (bloomComposer) { scene.traverse(darkenNonBloomed.bind(this)); bloomComposer.render(); } if (finalComposer) { scene.traverse(restoreMaterial.bind(this)); finalComposer.render(); } }

在scene.traverse的回调中，检验模型是否为发光体，再进行材质的更换，这里用的标识是 object.userData.isLight为true时，判定该物体为发光物体。其他物体则不发光

回调方法

```typescript function darkenNonBloomed(obj: THREE.Mesh) { if (bloomLayer) { if (!obj.userData.isLight && bloomLayer.test(obj.layers) === false) { materials[obj.uuid] = obj.material; obj.material = darkMaterial; } }

}

function restoreMaterial(obj: THREE.Mesh) { if (materials[obj.uuid]) { obj.material = materials[obj.uuid]; // 用于删除没必要的渲染 delete materials[obj.uuid]; } }

```

再场景的右上角我们新增了几个参数，用来调整线条的发光效果，下面通过动图看一下，图片有点大，请耐心等待加载

好啦，本篇文章到此，如看源码有不明白的地方，可私信\~

最近正在筹备工具库，以上可视化常用的方法都将涵盖在里面

历史文章

three.js——商场楼宇室内导航系统 内附源码

three.js——可视化高级涡轮效果+警报效果 内附源码

高德地图巡航功能 内附源码

three.js——3d塔防游戏 内附源码

three.js+物理引擎——跨越障碍的汽车 可操作 可演示

百度地图——如何计算地球任意两点之间距离 内附源码

threejs——可视化地球可操作可定位

three.js 专栏

源码及讲解

jvideo

源码 https://www.aspiringcode.com/content?id=17142274819552&uid=ef7a6d541bf3465faabae674357ca5e7

体验地址：https://display.aspiringcode.com:8888/html/17142274819552/