threejs管道生长DEMO展示

[复制链接]
查看: 1608   回复: 2     站长原创

268

主题

268

帖子

1509

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1509
2023-9-26 19:31:13   显示全部楼层   阅读模式  
1.png

项目预览地址

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 }


回复

使用道具 举报

0

主题

6

帖子

42

积分

新手上路

Rank: 1

积分
42
2023-10-8 08:40:31   显示全部楼层  
66666666666666666666
回复

使用道具 举报

0

主题

5

帖子

20

积分

新手上路

Rank: 1

积分
20
2024-2-6 12:14:25   显示全部楼层  
66666666666
回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司