风机可视化效果实现
风机效果图如上所示,这个效果是网上看到的,就分析了一下。主要用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);