Three.js 模型中增加 波浪 扩散 雷达扫描

在加载模型中增加波浪效果

关键方法是材质中的onBeforeCompile方法。
用此方法可以直接在threejs原有的材质效果中做出更改，在建模师给出的模型效果中更改样式

// obj === 建筑
obj.traverse(function(child) {
    if (child.material) {
        if (Array.isArray(child.material)) {
            child.material.forEach((elem) => {
                handleBeofreMaterial(elem);
            });
        } else {
            handleBeofreMaterial(child.material);
        }
    }
})
function handleBeofreMaterial(material) {
	material.onBeforeCompile = function(shader) {
		shader.uniforms.time = { value: 0 };
		// 替换shader中的顶点或者是偏远的代码即可完成
		// shader.fragmentShader.replace("void main() {", fragment)
		const fragment = `void main() {`;
		shader.fragmentShader.replace("void main() {", fragment)
		// shader.vertexShader
		const vertex = `void main() {`;
		shader.vertexShader = shader.vertexShader.replace("void main() {", vertex);
	}
}

下面两个demo的下载地址demo

以往demo扩散效果 地址

快速搭建工具-持续开发中
QQ群交流：1082834010