threejs管道生长DEMO展示

[复制链接]
查看: 283   回复: 1     站长原创

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

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

项目预览地址

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



完整源码地址:

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


直接开源得er~~~核心代码
  1. /*
  2. * @Author: xiefan2333 1668903208@qq.com
  3. * @Date: 2023-09-17 06:24:00
  4. * @LastEditors: xiefan2333 1668903208@qq.com
  5. * @LastEditTime: 2023-09-26 19:22:48
  6. * @FilePath: \7e:\自媒体\threejs公开课\shader学习\sahder应用\src\components\scence\js\load\glbLoad.js
  7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  8. */
  9. import * as THREE from 'three';
  10. import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
  11. import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
  12. import { rainShader } from '../shader/shader1/spherePower'
  13. import { shader4 } from '../shader/shader4/shadertex1.js'

  14. import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

  15. import fragmentShader from '../shader/shader4/faregm.glsl?raw';
  16. import vertexShader from '../shader/shader4/vertexU.glsl?raw'


  17. var gui = new GUI();  
  18. var folderLocal = gui.addFolder("控制管道");  
  19. let planeL = {alpha:0.3};  
  20.   


  21. const glbScence = {
  22.     glb: [],
  23.     path: '',
  24.     obj: [],
  25.     child: []
  26. }
  27. var loader = new GLTFLoader(); //创建一个GLTF加载
  28. loader.setPath('./glb/');
  29. glbScence.glb = ['工厂.glb']
  30. glbScence.path = './glb/'
  31. const scene = new THREE.Scene();
  32. var texLoader = new THREE.TextureLoader()

  33. function addMaterial(nam) {

  34.     const imgPlath = "./img/";
  35.     const tex = texLoader.load(imgPlath + nam);
  36.     tex.flipY = true
  37.     // tex.encoding = THREE.BasicDepthPacking
  38.     // tex.encoding = THREE.RGBADepthPacking


  39.     tex.colorSpace = THREE.SRGBColorSpace;
  40.     tex.colorSpace = THREE.LinearSRGBColorSpace
  41.     // tex.format=THREE.AlphaFormat
  42.     return (tex)
  43. }
  44. let hdr1 = addMaterial('hdr1.jpg')
  45. const hdr2 = addMaterial('hdr2.jpg')
  46. hdr1.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图  
  47. hdr2.mapping = THREE.EquirectangularReflectionMapping//专门针对金属反射映射贴图  
  48. scene.environment = hdr1

  49. const dracoLoader = new DRACOLoader();
  50. dracoLoader.setDecoderPath('./glb/draco/');
  51. dracoLoader.setDecoderConfig({ type: 'js' });
  52. dracoLoader.setPath(glbScence.path);
  53. loader.setDRACOLoader(dracoLoader);


  54. var gui = new GUI()



  55. for (let i = 0; i < glbScence.glb.length; i++) {
  56.     loader.load(glbScence.glb[i],
  57.         (gltf) => {
  58.             glbScence.obj[i] = gltf.scene
  59.             // console.log( glbScence.obj[0] );
  60.             scene.add(glbScence.obj[0])
  61.             glbScence.obj[0].traverse(function (child) {


  62.                 if (child.isMesh) {
  63.                     if (child.material.name == '管道1' || child.material.name == '管道2' || child.material.name == '管道附加') {
  64.                         child.material.depthWrite = true;
  65.                         child.material.depthTest = true;
  66.                     }

  67.                     if (child.material.name == '管道附加') {
  68.                         child.material = rainShader
  69.                         // console.log(child.name);
  70.                     }

  71.                  

  72.       
  73.                     if (child.material.name == '管道1') {
  74.                         child.material.onBeforeCompile = function (shader) {

  75.                             //console.log(shader.fragmentShader);

  76.                             child.material.userData.shader = shader;
  77.      

  78.                             shader.fragmentShader = shader.fragmentShader.replace(`#include <color_pars_fragment>`,
  79.                                 `#include <color_pars_fragment>                          
  80.                                 uniform float uTime;  // 移到这里  
  81.                                           
  82.                             `
  83.                             )
  84.                             //console.log(shader.fragmentShader);
  85.                             shader.fragmentShader = shader.fragmentShader.replace
  86.                                 (`#include <color_fragment>`,
  87.                                     `#include <color_fragment>                       
  88.                                diffuseColor=vec4(0.5,.5,1,1);
  89.                                 diffuseColor=vec4(0.5,sin(uTime),0,1);
  90.                            `
  91.                                 )
  92.                             //console.log(shader.customProgramCacheKey);
  93.                             //console.log(child.material.userData.shader.uniforms.uTime);
  94.                             var clock = new THREE.Clock();
  95.                             const newMaterial = () => {
  96.                                 var deltaend = clock.getElapsedTime()
  97.                                 child.material.userData.shader.uniforms.uTime.value = deltaend;
  98.                                 requestAnimationFrame(newMaterial)
  99.                             }
  100.                             newMaterial()
  101.                         }




  102.                     }

  103.                     if (child.material.name == '管道1') {
  104.                        // child.material = shader4

  105.                     }
  106.                     let uniforms = {                                 
  107.                         glowAlpha: { value:0.0},
  108.         
  109.                       }
  110.                     if (child.material.name == '管道1') {
  111.                         // console.log(child.material);


  112.                         // child.geometry.attributes.uv.normalized=true
  113.                       //  console.log(child.geometry.attributes.uv)

  114.                        // console.log(child.geometry.getAttribute('uv').array);

  115.                         //child.material.map.repeat.set(.4, .4);
  116.                         const material = new THREE.MeshStandardMaterial({
  117.                             color:0xfff3ff,
  118.                             roughness: 0.2,
  119.                             metalness: 0.8,
  120.                             transparent:true,
  121.                             onBeforeCompile: (shader) => {
  122.                                 material.userData.shader = shader;
  123.                                 // console.log(shader);
  124.                                      //  gui.add(cube.position, 'x', -5, 5).step(0.01);

  125.                             shader.uniforms.uTime = { value: 0 };
  126.                             shader.uniforms.glowAlpha = uniforms.glowAlpha;
  127.                   
  128.                                // console.log( shader.uniforms.glowAlpha);
  129.                                // shader.uniforms.uTime = { value: 0 };

  130.                                 shader.vertexShader = shader.vertexShader.replace(`#include <uv_pars_vertex>`,
  131.                                 `#include <uv_pars_vertex>                                                                                       
  132.                                  varying vec2 vUv;                                                                                                                                                                                 
  133.                                `)
  134.                                shader.vertexShader = shader.vertexShader.replace(`#include <uv_vertex>`,
  135.                                `#include <uv_vertex>                                                                                       
  136.                                vUv = vec3( uv, 1 ).xy;                                                                                                                                                                              
  137.                               `)
  138.                            
  139.                              shader.fragmentShader = shader.fragmentShader.replace(`#include <color_pars_fragment>`,
  140.                              `#include <color_pars_fragment>                                                               
  141.                               uniform float uTime;  // 移到这里  
  142.                               uniform float glowAlpha;
  143.                               varying vec2 vUv;   

  144.                               float Band(float t,float start,float end,float blur){
  145.                                 float step1=smoothstep(start-blur,start+blur,t);
  146.                                 float step2=smoothstep((1.+end+blur),(1.+end-blur),t);
  147.                                 return step2*step1;
  148.                             }                                                                                                                                                                             
  149.                             `)
  150.                             shader.fragmentShader = shader.fragmentShader.replace(`#include <color_fragment>`,
  151.                                     `#include <color_fragment>   
  152.                                     vec2 vUV;  
  153.                                     vUV=vUv;
  154.                                     vUV.y+=uTime/10.0;
  155.                                     float maskG=Band(fract(vUv.y*1.),glowAlpha,-.0,0.0003);//重复扩展uv-fract
  156.                                     vec3 grampM= vec3(0.2,1.,1.)*maskG;
  157.                                // diffuseColor=vec4(0.5,sin(uTime),0,1);                        
  158.                                //diffuseColor=vec4(fract(vUV.x*2.), 1.0, 1.0, 1.0);//横纯色渐变      
  159.                                diffuseColor=vec4(grampM, 1.0)*vec4(1.,1.,1.,1.);
  160.                                diffuseColor=vec4(smoothstep(.31,.49,fract(vUV.y*10.)), 1.0, 1, 1)*maskG;//横纯色渐变   
  161.                              `
  162.                                 )
  163.                                 //console.log(shader.vertexShader);
  164.                               //console.log(shader.fragmentShader);

  165.                                //console.log(shader.uniforms);
  166.                                //console.log(shader.uniforms.glowAlpha.value);
  167.                               
  168.                             }

  169.                            
  170.                         })
  171.       
  172.                       //  console.log(material.userData.shader.uniforms.uTime.value);
  173.                        // gui.add( shader.uniforms.glowAlpha.value, '生长情况', 1.0, 0).step(0.01);

  174.                        folderLocal.add(planeL, 'alpha',0.0,1.0).name('生长轨迹').onChange(() => {  
  175.                        // console.log(planeL.alpha);  
  176.                        material.userData.shader.uniforms.glowAlpha.value=planeL.alpha;
  177.                       });
  178.                      
  179.                         var clock = new THREE.Clock();
  180.                         const newMaterial = () => {
  181.                             var deltaend = clock.getElapsedTime()
  182.                             if (material.userData.shader) {
  183.                                 material.userData.shader.uniforms.uTime.value = deltaend;
  184.                             }
  185.                             requestAnimationFrame(newMaterial)
  186.                         }
  187.                         newMaterial()
  188.                     
  189.                         child.material = material;
  190.                      
  191.                     
  192.                     }

  193.                     if (child.isLight) {
  194.                         // console.log(child.name);
  195.                         child.decay = 0;
  196.                     }
  197.                 }
  198.             })

  199.         }, function (xhr) {
  200.             // console.log( ( xhr.loaded / xhr.total ) + '% 模型加载' );

  201.         }
  202.     )
  203. }

  204. export { glbScence, scene }
复制代码



回复

使用道具 举报

0

主题

6

帖子

40

积分

新手上路

Rank: 1

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

使用道具 举报

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

高级模式

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