Three.js实战：用ShaderMaterial打造半透明发光人体模型的视觉盛宴
在医疗可视化、教育演示和游戏特效领域，3D人体模型的呈现方式直接影响用户体验。传统材质往往难以实现既透明又发光的科技感效果，这正是ShaderMaterial大显身手的场景。本文将带你深入Three.js的着色器编程世界，从零构建一个具有边缘发光、透明度控制和动态色彩混合的高级人体模型。
1. 环境准备与基础模型加载
在开始着色器编程前，我们需要搭建基本的Three.js环境。这里假设你已经熟悉WebGL渲染器、场景和相机的初始化流程。让我们从加载GLTF格式的人体模型开始：
import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); let humanModel; loader.load('/models/human.gltf', (gltf) => { humanModel = gltf.scene; scene.add(humanModel); // 遍历模型所有子对象 humanModel.traverse((child) => { if (child.isMesh) { prepareShaderMaterial(child); } }); });提示：确保模型文件放置在正确的资源路径下，GLTFLoader会自动处理材质和纹理的加载。
关键准备工作包括：
- 创建Three.js场景、相机和渲染器
- 设置合适的环境光和定向光
- 添加OrbitControls实现模型旋转查看
- 确认模型加载后能正确显示基础形态
2. ShaderMaterial核心原理剖析
ShaderMaterial是Three.js中直接操作GPU渲染管线的利器。与标准材质不同，它允许我们完全自定义顶点和片元着色器：
// 顶点着色器示例 varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }着色器编程的核心概念：
uniforms：CPU传递给GPU的全局变量（如灯光、时间等）varyings：顶点着色器传递给片元着色器的插值数据attributes：每个顶点特有的数据（如位置、法线等）
表：ShaderMaterial与标准材质的性能对比
| 特性 | ShaderMaterial | MeshStandardMaterial |
|---|---|---|
| 灵活性 | 完全可编程 | 有限参数调节 |
| 性能 | 取决于着色器复杂度 | 高度优化 |
| 学习曲线 | 陡峭 | 平缓 |
| 适用场景 | 特殊视觉效果 | 常规PBR渲染 |
3. 实现半透明发光效果的完整着色器
让我们构建一个完整的自定义着色器，实现以下效果：
- 基础半透明材质
- 基于视角的边缘发光（菲尼尔效应）
- 动态色彩混合
const customMaterial = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uGlowColor: { value: new THREE.Color(0x74bfe3) }, uFresnelPower: { value: 2.5 } }, vertexShader: ` varying vec3 vNormal; varying vec3 vViewDir; void main() { vNormal = normalize(normalMatrix * normal); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewDir = -normalize(mvPosition.xyz); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform vec3 uGlowColor; uniform float uFresnelPower; varying vec3 vNormal; varying vec3 vViewDir; void main() { // 基础透明度 float baseAlpha = 0.4; // 菲涅尔效应计算 float fresnel = pow(1.0 - max(dot(vNormal, vViewDir), 0.0), uFresnelPower); // 边缘发光强度 float glowIntensity = fresnel * 2.0; // 最终颜色合成 vec3 finalColor = mix(uGlowColor, vec3(1.0), 0.7); float finalAlpha = min(baseAlpha + glowIntensity * 0.6, 1.0); gl_FragColor = vec4(finalColor * (1.0 + glowIntensity), finalAlpha); } `, transparent: true, side: THREE.DoubleSide });关键参数调节指南：
uFresnelPower：控制边缘发光的锐利程度（值越大发光范围越窄）baseAlpha：基础透明度（0-1之间）glowIntensity：发光强度乘数
4. 高级技巧与性能优化
实现基础效果后，我们可以进一步优化和增强：
4.1 动态效果与交互增强
通过uniform变量添加时间动态效果：
function animate() { requestAnimationFrame(animate); customMaterial.uniforms.uTime.value += 0.01; // 实现呼吸灯效果 const pulse = Math.sin(customMaterial.uniforms.uTime.value) * 0.5 + 0.5; customMaterial.uniforms.uGlowColor.value.setHSL(0.6, 0.8, pulse * 0.3 + 0.4); renderer.render(scene, camera); }4.2 点击交互与高亮反馈
为模型添加点击事件检测：
const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseClick(event) { // 计算鼠标在归一化设备坐标中的位置 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 更新射线 raycaster.setFromCamera(mouse, camera); // 计算与模型的交点 const intersects = raycaster.intersectObject(humanModel, true); if (intersects.length > 0) { const clickedMesh = intersects[0].object; // 临时改变点击部位的材质 clickedMesh.material.uniforms.uGlowColor.value.set(0xff0000); setTimeout(() => { clickedMesh.material.uniforms.uGlowColor.value.set(0x74bfe3); }, 300); } }4.3 性能优化策略
当处理复杂人体模型时，需注意：
- 合并几何体减少draw call
- 使用共享材质实例
- 在着色器中避免复杂数学运算
- 合理使用
#define预处理指令简化条件分支
#define USE_FRESNEL 1 void main() { #if USE_FRESNEL float fresnel = pow(1.0 - max(dot(vNormal, vViewDir), 0.0), uFresnelPower); #else float fresnel = 0.0; #endif // ...其余代码 }在实际项目中，这种半透明发光效果特别适合展示人体内部结构。医疗可视化应用中，可以用不同颜色区分器官系统；教育演示中，发光边缘能引导观众注意力；游戏角色则能营造神秘或超自然的氛围。
