风机可视化效果实现

风机可视化效果实现

风机效果图如上所示，这个效果是网上看到的，就分析了一下。主要用Threejs来实现，大致效果是一个风机，从原来白色表面材质，逐渐过渡到线框效果，并且底部也有一些类似于流线浮动的效果。

风机材质渐变效果实现

这里的风机其实是用了两个模型，一个是颜色材质的风机模型1，一个是线框材质的风机模型2，然后在风机模型1的材质上绑定一个与底面平行的clippingPlanes。

const shellModel = object.getObjectByName("颜色材质") as THREE.Object3D;  // 获取白色材质模型
const clippingPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 3.5);  // 创建裁剪面


// 白色外壳消隐效果，renderMixins里的方法放到render函数里去执行
mesh.material.clippingPlanes = [clippingPlane];  // 将裁剪面绑定到材质上
renderMixins.push(() => {
    if (clippingPlane.constant <= -1) return void 0;
    clippingPlane.constant -= 0.0001;
});

底部流线浮动效果

底部用的也是一个模型，上面的材质是一张画了许多线条的纹理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e20BWvLQ-1675821267232)(null)]

将纹理设置为重复纹理，texture.repeat代表纹理在某个方向上重复多少次，然后动态的改变texture.repeat，即可形成流动的效果。

    const texture = object.material.map;
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    renderMixins.push(() => {
      const count = texture.repeat.y;
      if (count <= 10) {
        texture.repeat.x += 0.01;
        texture.repeat.y += 0.02;
      } else {
        texture.repeat.x = 0;
        texture.repeat.y = 0;
      }
    });

风机构件选中边缘高亮效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxzOtrRY-1675821268345)(null)]

这里用了一个后处理的库three-outllinepass。

    const composer = new EffectComposer(renderer.value);
    const renderPass = new RenderPass(scene.value, camera.value);
    const outlinePass = new OutlinePass(
      new THREE.Vector2(element.value.offsetWidth, element.value.offsetWidth),
      scene.value,
      camera.value,
      selected
    );
    outlinePass.renderToScreen = true;
    outlinePass.selectedObjects = selected;
    composer.addPass(renderPass);
    composer.addPass(outlinePass);
    const params = {
      edgeStrength: 10,
      edgeGlow: 0,
      edgeThickness: 50.0,
      pulsePeriod: 1,
      usePatternTexture: false,
    };
    outlinePass.edgeStrength = params.edgeStrength;
    outlinePass.edgeGlow = params.edgeGlow;
    outlinePass.visibleEdgeColor.set(color);
    outlinePass.hiddenEdgeColor.set(color);
    composer.render(scene, camera);
    composers.push(composer);