web

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

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

视频讲解及源码见文末

技术栈

three.js 0.165.0
vite 4.3.2
nodejs v18.19.0

效果图

一镜到底动画

一镜到底 (1).gif

切割动画

切割动画.gif

线稿动画

线稿动画.gif

外壳透明度动画

外壳透明度动画.gif

展开齿轮动画

展开齿轮动画.gif

发光线条动画

发光线条.gif

代码及功能介绍

着色器

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

创建顶点着色器 vertexShader:

varying vec2 vUv;

void main() {

    vUv = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

创建片元着色器 vertexShader:

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

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 方法中

 // 更新中心位置（例如，每一帧都改变）  
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的使用方法，支持通过变量对着色器材质中的属性进行改变

光影着色器.gif

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

光影着色器-球体.gif

着色器中有几个参数可以自定义也可以自己修改， 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值做补间动画，以下是代码示意

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

    })

详看切割效果图

切割动画.gif

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

模型材质需要注意的问题

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

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

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

depthWrite对比

depthwrite对比.jpeg

renderOrder 对比

renderOrder 对比.jpeg

自定义动画贝塞尔曲线

众所周知，贝塞尔曲线通常用于调整关键帧动画，创建平滑的、曲线的运动路径。本文中使用的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(edgeLineGr0up.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，下面就介绍一下这个方法

源码

[p0] – 起点  

[p1] – 第一个控制点  

[p2] – 第二个控制点  

[p3] – 终点

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参数

具体效果如下

贝塞尔曲线.gif

齿轮

齿轮动画

模型中自带动画

齿轮动画数据.jpeg

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

具体使用方法：

   // 齿轮动画
/**

     * 

     * @param model 动画模型

     * @param animations 动画合集

     */

    motorAnimation = new HandleAnimation(motorGltf.scene, motorGltf.animations)
// 播放动画 take 001 是默认动画名称

    motorAnimation.play('Take 001')

在render中调用

motorAnimation && motorAnimation.upDate()

齿轮展开（补间动画）

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

使用方法：

/**

 * @param mesh 受控模型

 * @param draggingChangedCallback  操控回调

 */
TransformControls(mesh, ()=>{
console.log(mesh.position)

})

齿轮展开定位.jpeg

齿轮发光

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


// 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 

 */

调用方法如下：


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渲染函数中调用

 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时，判定该物体为发光物体。其他物体则不发光

回调方法

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];

    }

}