模型粒子化 ·Model Particle· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么glTF/FBX/OBJ 外部模型加载相机交互控制器点云 / 粒子 / 实例化渲染GSAP / anime.js 属性动画requestAnimationFrame 渲染循环效果说明本案例演示模型粒子化效果基于 WebGL 实现「模型粒子化」可视化效果附完整可运行源码核心用到 OrbitControls、THREE.Points、glTF/Draco。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Loader异步加载模型glTF 返回gltf.scene加载后注意scale与坐标系。Draco 需配置DRACOLoader。OrbitControls轨道旋转缩放开enableDamping时每帧需controls.update()。Points大量顶点用点精灵渲染InstancedMesh相同几何体批量绘制降低 draw call。时间线库驱动 position/rotation/uniform与 rAF 渲染循环配合。实现步骤搭建 Scene / Camera / Renderer 与 OrbitControlsLoader 异步加载模型/纹理资源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.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, 100000)camera.position.set(300, 300, 300)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)const loader new GLTFLoader()loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST js/three/draco/))loader.load(FILE_HOST /files/model/LittlestTokyo.glb,gltf {let count 0gltf.scene.traverse(child {if (child.isMesh) {countsetTimeout(() {const particles createPoints(child)scene.add(particles)gsap.to(particles.material, { opacity: 0.9, duration: 1 })}, count * 100)}})})animate()function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)}function createPoints(mesh) {mesh.updateMatrixWorld()const positions []const vertex new THREE.Vector3();for (let i 0; i mesh.geometry.attributes.position.count; i) {vertex.fromBufferAttribute(mesh.geometry.attributes.position, i)vertex.applyMatrix4(mesh.matrixWorld)positions.push(vertex.x, vertex.y, vertex.z)}const geometry new THREE.BufferGeometry()geometry.setAttribute(position, new THREE.Float32BufferAttribute(positions, 3))const colors new Float32Array(positions.map(() Math.random()))geometry.setAttribute(color, new THREE.Float32BufferAttribute(colors, 3))const material new THREE.PointsMaterial({size: 10,vertexColors: true,opacity: 0,map: new THREE.TextureLoader().load(HOST files/images/snow.png),transparent: true})const particles new THREE.Points(geometry, material)return particles}完整源码GitHub小结本文提供模型粒子化完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库