threejs管道生长DEMO展示

xiefandaren · 2023-9-26 19:31:13

项目预览地址

https://www.xiefansq.cn/threejsP/2023/9/26/

完整源码地址：

游客，如果您要查看本帖隐藏内容请回复

直接开源得er~~~核心代码

/*
* @Author: xiefan2333 1668903208@qq.com
* @Date: 2023-09-17 06:24:00
* @LastEditors: xiefan2333 1668903208@qq.com
* @LastEditTime: 2023-09-26 19:22:48
* @FilePath: \7e:\自媒体\threejs公开课\shader学习\sahder应用\src\components\scence\js\load\glbLoad.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { rainShader } from '../shader/shader1/spherePower'
import { shader4 } from '../shader/shader4/shadertex1.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import fragmentShader from '../shader/shader4/faregm.glsl?raw';
import vertexShader from '../shader/shader4/vertexU.glsl?raw'
var gui = new GUI();
var folderLocal = gui.addFolder("控制管道");
let planeL = {alpha:0.3};
const glbScence = {
glb: [],
path: '',
obj: [],
child: []
}
var loader = new GLTFLoader(); //创建一个GLTF加载
loader.setPath('./glb/');
glbScence.glb = ['工厂.glb']
glbScence.path = './glb/'
const scene = new THREE.Scene();
var texLoader = new THREE.TextureLoader()
function addMaterial(nam) {
const imgPlath = "./img/";
const tex = texLoader.load(imgPlath + nam);
tex.flipY = true
// tex.encoding = THREE.BasicDepthPacking
// tex.encoding = THREE.RGBADepthPacking
tex.colorSpace = THREE.SRGBColorSpace;
tex.colorSpace = THREE.LinearSRGBColorSpace
// tex.format=THREE.AlphaFormat
return (tex)
}
let hdr1 = addMaterial('hdr1.jpg')
const hdr2 = addMaterial('hdr2.jpg')
hdr1.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图
hdr2.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图
scene.environment = hdr1
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./glb/draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.setPath(glbScence.path);
loader.setDRACOLoader(dracoLoader);
var gui = new GUI()
for (let i = 0; i < glbScence.glb.length; i++) {
loader.load(glbScence.glb[i],
(gltf) => {
glbScence.obj[i] = gltf.scene
// console.log( glbScence.obj[0] );
scene.add(glbScence.obj[0])
glbScence.obj[0].traverse(function (child) {
if (child.isMesh) {
if (child.material.name == '管道1' || child.material.name == '管道2' || child.material.name == '管道附加') {
child.material.depthWrite = true;
child.material.depthTest = true;
}
if (child.material.name == '管道附加') {
child.material = rainShader
// console.log(child.name);
}
if (child.material.name == '管道1') {
child.material.onBeforeCompile = function (shader) {
//console.log(shader.fragmentShader);
child.material.userData.shader = shader;
shader.fragmentShader = shader.fragmentShader.replace(`#include <color_pars_fragment>`,
`#include <color_pars_fragment>
uniform float uTime; // 移到这里
`
)
//console.log(shader.fragmentShader);
shader.fragmentShader = shader.fragmentShader.replace
(`#include <color_fragment>`,
`#include <color_fragment>
diffuseColor=vec4(0.5,.5,1,1);
diffuseColor=vec4(0.5,sin(uTime),0,1);
`
)
//console.log(shader.customProgramCacheKey);
//console.log(child.material.userData.shader.uniforms.uTime);
var clock = new THREE.Clock();
const newMaterial = () => {
var deltaend = clock.getElapsedTime()
child.material.userData.shader.uniforms.uTime.value = deltaend;
requestAnimationFrame(newMaterial)
}
newMaterial()
}
}
if (child.material.name == '管道1') {
// child.material = shader4
}
let uniforms = {
glowAlpha: { value:0.0},
}
if (child.material.name == '管道1') {
// console.log(child.material);
// child.geometry.attributes.uv.normalized=true
// console.log(child.geometry.attributes.uv)
// console.log(child.geometry.getAttribute('uv').array);
//child.material.map.repeat.set(.4, .4);
const material = new THREE.MeshStandardMaterial({
color:0xfff3ff,
roughness: 0.2,
metalness: 0.8,
transparent:true,
onBeforeCompile: (shader) => {
material.userData.shader = shader;
// console.log(shader);
// gui.add(cube.position, 'x', -5, 5).step(0.01);
shader.uniforms.uTime = { value: 0 };
shader.uniforms.glowAlpha = uniforms.glowAlpha;
// console.log( shader.uniforms.glowAlpha);
// shader.uniforms.uTime = { value: 0 };
shader.vertexShader = shader.vertexShader.replace(`#include <uv_pars_vertex>`,
`#include <uv_pars_vertex>
varying vec2 vUv;
`)
shader.vertexShader = shader.vertexShader.replace(`#include <uv_vertex>`,
`#include <uv_vertex>
vUv = vec3( uv, 1 ).xy;
`)
shader.fragmentShader = shader.fragmentShader.replace(`#include <color_pars_fragment>`,
`#include <color_pars_fragment>
uniform float uTime; // 移到这里
uniform float glowAlpha;
varying vec2 vUv;
float Band(float t,float start,float end,float blur){
float step1=smoothstep(start-blur,start+blur,t);
float step2=smoothstep((1.+end+blur),(1.+end-blur),t);
return step2*step1;
}
`)
shader.fragmentShader = shader.fragmentShader.replace(`#include <color_fragment>`,
`#include <color_fragment>
vec2 vUV;
vUV=vUv;
vUV.y+=uTime/10.0;
float maskG=Band(fract(vUv.y*1.),glowAlpha,-.0,0.0003);//重复扩展uv-fract
vec3 grampM= vec3(0.2,1.,1.)*maskG;
// diffuseColor=vec4(0.5,sin(uTime),0,1);
//diffuseColor=vec4(fract(vUV.x*2.), 1.0, 1.0, 1.0);//横纯色渐变
diffuseColor=vec4(grampM, 1.0)*vec4(1.,1.,1.,1.);
diffuseColor=vec4(smoothstep(.31,.49,fract(vUV.y*10.)), 1.0, 1, 1)*maskG;//横纯色渐变
`
)
//console.log(shader.vertexShader);
//console.log(shader.fragmentShader);
//console.log(shader.uniforms);
//console.log(shader.uniforms.glowAlpha.value);
}
})
// console.log(material.userData.shader.uniforms.uTime.value);
// gui.add( shader.uniforms.glowAlpha.value, '生长情况', 1.0, 0).step(0.01);
folderLocal.add(planeL, 'alpha',0.0,1.0).name('生长轨迹').onChange(() => {
// console.log(planeL.alpha);
material.userData.shader.uniforms.glowAlpha.value=planeL.alpha;
});
var clock = new THREE.Clock();
const newMaterial = () => {
var deltaend = clock.getElapsedTime()
if (material.userData.shader) {
material.userData.shader.uniforms.uTime.value = deltaend;
}
requestAnimationFrame(newMaterial)
}
newMaterial()
child.material = material;
}
if (child.isLight) {
// console.log(child.name);
child.decay = 0;
}
}
})
}, function (xhr) {
// console.log( ( xhr.loaded / xhr.total ) + '% 模型加载' );
}
)
}
export { glbScence, scene }

复制代码

zhangjie · 2023-10-8 08:40:31

66666666666666666666