当前位置：首页 > news >正文

Three.js 代码云效果 | 三维可视化 / AI 提示词

news 2026/5/4 3:02:05

Three.js 代码云效果 | 三维可视化 / AI 提示词

📋 AI 提示词

使用 Three.js 的 ShaderMaterial 创建代码云效果，通过多个代码纹理的随机切换和下落动画，实现代码雨的视觉效果。

🖼️ 效果预览

🎮 案例演示

立即体验

效果拆解

效果	实现方式
代码纹理	加载多个代码图片作为纹理
随机切换	在着色器中根据随机值选择不同纹理
下落动画	在渲染循环中更新代码块位置
相机跟随	代码块始终面向相机
循环效果	代码块落到底部后重新回到顶部
随机更新	定期更新随机值改变纹理选择

核心技术点

1. 着色器材质创建

functioninitMaterial(){letloader=newTHREE.TextureLoader()returnnewTHREE.ShaderMaterial({uniforms:{texture1:{value:loader.load(FILE_HOST+'application/codeCloud/1.png')},texture2:{value:loader.load(FILE_HOST+'application/codeCloud/2.png')},texture3:{value:loader.load(FILE_HOST+'application/codeCloud/3.png')},texture4:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/4.png')},texture5:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/5.png')},texture6:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/6.png')},texture7:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/7.png')},texture8:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/8.png')},texture9:{value:loader.load(FILE_HOST+'/threeExamples/application/codeCloud/9.png')},random:{value:Math.random()}},vertexShader:`varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,fragmentShader:`varying vec2 vUv; uniform sampler2D texture1; uniform sampler2D texture2; uniform sampler2D texture3; uniform sampler2D texture4; uniform sampler2D texture5; uniform sampler2D texture6; uniform sampler2D texture7; uniform sampler2D texture8; uniform sampler2D texture9; uniform float random; void main() { float selfRandom = vUv.y - fract(vUv.y); float k = abs(sin(selfRandom * random))*10.0; if(k < 1.0) { gl_FragColor = texture2D( texture1, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 2.0) { gl_FragColor = texture2D( texture2, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 3.0) { gl_FragColor = texture2D( texture3, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 4.0) { gl_FragColor = texture2D( texture4, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 5.0) { gl_FragColor = texture2D( texture5, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 6.0) { gl_FragColor = texture2D( texture6, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 7.0) { gl_FragColor = texture2D( texture7, vec2(fract(vUv.x), fract(vUv.y))); } else if(k < 8.0) { gl_FragColor = texture2D( texture8, vec2(fract(vUv.x), fract(vUv.y))); } else { gl_FragColor = texture2D( texture9, vec2(fract(vUv.x), fract(vUv.y))); } }`,depthWrite:false,transparent:true});}

2. 代码云创建

cloud=newTHREE.Group()scene.add(cloud)shader_material=initMaterial()letwidth=128,height=128for(vari=0;i<1000;i++){varpos=newTHREE.Vector3(Math.random()*range-range/2,Math.random()*range-range/2,Math.random()*range-range/2)pos.vX=((Math.random()-0.5)/3)/10pos.vY=(0.05+Math.random()*0.1)/5letgeometry=newTHREE.PlaneGeometry(4,4);lets=Math.floor(Math.random()*1000)+1geometry.attributes.uv.array=geometry.attributes.uv.array.map(e=>e+=s)varplane=newTHREE.Mesh(geometry,shader_material);plane.position.copy(pos)plane.userData.pos=pos cloud.add(plane)}

3. 随机值更新

setInterval(()=>{if(cloud){cloud.children.map(plane=>{plane.material.uniforms.random.value=Math.random()})}},100)

4. 动画更新

functionsnowanimate(){if(cloud){cloud.children.map(plane=>{plane.rotation.y=camera.rotation.yletpos=plane.userData.pos plane.position.y+=pos.vYif(plane.position.y>=range/2)plane.position.y=-range/2})}}