材质修改动画 ·Material Tweak· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么group.traverse按name找到特定部件材质MeshStandardMaterial的 wireframe / opacity / metalness / roughnessgsap.to(material.color)颜色过渡动画效果说明加载汽车 glb针对名为网格138_3的车身部件GUI 调节线框、透明、金属度等改颜色时用gsap 1.5 秒插值避免突变。核心概念group.traverse(child {if (child.isMesh child.name 网格138_3) { material child.material; material.envMap textureCube; // 天空盒反射 } });// gsap 动画改颜色 folder.addColor({ color: material.color.clone() }, color).onChange(c { gsap.to(material.color, { ...c, duration: 1.5 }); });::: tip glTF 子节点 name 来自建模软件加载后console.log或编辑器查看再 traverse。 :::代码要点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.js import { GUI } from three/addons/libs/lil-gui.module.min.js import gsap from gsapconst 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(1, 2, 2)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping truewindow.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}animate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}scene.add(new THREE.AmbientLight(0xffffff, 0.2))const pointLight new THREE.PointLight(0xffffff, 1.5, 0, 2)pointLight.position.set(5, 5, 5)scene.add(pointLight)const directionalLight new THREE.DirectionalLight(0xffffff, 2)directionalLight.position.set(-5, 5, -5)scene.add(directionalLight)let group// 加载模型 gltf/ glb draco解码器 const loader new GLTFLoader()loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST js/three/draco/))loader.load(HOST /files/model/car.glb,gltf {group gltf.scenescene.add(group)changeMaterial()})// 文件地址 const urls [0, 1, 2, 3, 4, 5].map(k (FILE_HOST files/sky/skyBox0/ (k 1) .png));const textureCube new THREE.CubeTextureLoader().load(urls);function changeMaterial() {let materialif (!group) returngroup.traverse(child {if (child.isMesh child.name 网格138_3) {material child.materialmaterial.envMap textureCube}})const folder new GUI()folder.add(material, wireframe).name(线框).listen()folder.add(material, transparent).name(透明).listen()folder.add(material, opacity).min(0).max(1).name(透明度).listen()folder.addColor({ color: material.color.clone() }, color).name(颜色).listen().onChange(c {gsap.to(material.color, { ...c, duration: 1.5 })})folder.add(material, metalness).min(0).max(1).name(金属度).listen()folder.add(material, roughness).min(0).max(1).name(粗糙度).listen()}完整源码GitHub小结本文提供材质修改动画完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库