Three.js 模型混合着色器教程

模型混合着色器 ·Model Blend· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么glTF/FBX/OBJ 外部模型加载自定义 ShaderMaterial / 修改内置 shader相机交互控制器requestAnimationFrame 渲染循环效果说明本案例演示模型混合着色器效果基于 WebGL 实现「模型混合着色器」可视化效果附完整可运行源码核心用到 onBeforeCompile、OrbitControls、glTF/Draco。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Loader异步加载模型glTF 返回gltf.scene加载后注意scale与坐标系。Draco 需配置DRACOLoader。ShaderMaterial完全自定义 GLSLonBeforeCompile可在内置材质 shader 中注入代码。关注uniforms与 rAF 更新。OrbitControls轨道旋转缩放开enableDamping时每帧需controls.update()。实现步骤搭建 Scene / Camera / Renderer 与 OrbitControlsLoader 异步加载模型/纹理资源定义材质/shader 与 uniformsrAF 中更新rAF 循环中 update 并 render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js import { DRACOLoader } from three/examples/jsm/loaders/DRACOLoader.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(3, 3, 3)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}scene.add(new THREE.AmbientLight(0xffffff, 3))scene.add(new THREE.AxesHelper(1000))let car nullconst loader new GLTFLoader()loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST js/three/draco/))loader.load(HOST /files/model/car.glb,gltf {car gltf.scenescene.add(car)modelBlendShader(car, box)})animate()function animate() {requestAnimationFrame(animate)car?.render?.()renderer.render(scene, camera)}/混合着色/ function modelBlendShader(model, DOM) {let materials []model.traverse(c c.isMesh materials.push(c.material))materials [... new Set(materials)]const uniforms {iResolution: { type: v2, value: new THREE.Vector2(DOM.clientWidth, DOM.clientHeight) },iTime: { type: f, value: 1.0 }}materials.forEach(material {material.onBeforeCompile shader {shader.uniforms.iResolution uniforms.iResolutionshader.uniforms.iTime uniforms.iTimeshader.fragmentShader shader.fragmentShader.replace(/#include /,uniform vec2 iResolution; uniform float iTime; #include)shader.fragmentShader shader.fragmentShader.replace(vec4 diffuseColor vec4( diffuse, opacity );,vec3 c; float l,ziTime; for(int i0;i3;i) { vec2 uv,pgl_FragCoord.xy/iResolution/2.0; uvp 2.0; p-.5; p.x*iResolution.x/iResolution.y; z.07; llength(p); uvp/l(sin(z)1.)abs(sin(l*9.-z-z)); c[i].01/length(mod(uv,1.)-.5); } vec4 diffuseColor vec4( diffusecvec3(20.,20.,20.), opacity );)}material.needsUpdate true})model.render () uniforms.iTime.value 0.02}完整源码GitHub小结本文提供模型混合着色器完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库