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

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

news 2026/7/7 17:55:20

模型混合着色器 ·Model Blend· ▶ 在线运行案例

案例合集：三维可视化功能案例（threehub.cn）
开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
400个案例代码:网盘链接

你将学到什么

glTF/FBX/OBJ 外部模型加载
自定义 ShaderMaterial / 修改内置 shader
相机交互控制器
requestAnimationFrame 渲染循环

效果说明

本案例演示模型混合着色器效果：基于 WebGL 实现「模型混合着色器」可视化效果，附完整可运行源码；核心用到 onBeforeCompile、OrbitControls、glTF/Draco。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

Loader异步加载模型；glTF 返回gltf.scene，加载后注意scale与坐标系。Draco 需配置DRACOLoader。
ShaderMaterial完全自定义 GLSL；onBeforeCompile可在内置材质 shader 中注入代码。关注uniforms与 rAF 更新。
OrbitControls轨道旋转缩放；开enableDamping时每帧需controls.update()。

实现步骤

搭建 Scene / Camera / Renderer 与 OrbitControls
Loader 异步加载模型/纹理资源
定义材质/shader 与 uniforms，rAF 中更新
rAF 循环中 update 并 render

代码要点

import * as THREE from 'three'import { 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.js'
const 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.clientHeight
camera.updateProjectionMatrix()
}
scene.add(new THREE.AmbientLight(0xffffff, 3))
scene.add(new THREE.AxesHelper(1000))
let car = null
const loader = new GLTFLoader()
loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST + 'js/three/draco/'))
loader.load(
HOST + '/files/model/car.glb',
gltf => {
car = gltf.scene
scene.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.iResolution
shader.uniforms.iTime = uniforms.iTime
shader.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,z=iTime; for(int i=0;i<3;i++) { vec2 uv,p=gl_FragCoord.xy/iResolution/2.0; uv=p + 2.0; p-=.5; p.x*=iResolution.x/iResolution.y; z+=.07; l=length(p); uv+=p/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}