three.js 中的 Flower 模型源于 Kenney Nature Pack 的花朵 GLTF 资源及其实例化散布实践【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsFlower 是 three.js 官方仓库中一份经过二次加工的低多边形花朵模型资源源文件为 Flower.glb由 Kenney 的 Nature Pack 演化而来。本文围绕 Flower/README.md 讲述该资源的出处、修改内容与许可证并以官方示例 webgl_instancing_scatter.html 为实战入口演示如何用GLTFLoader加载它、按节点名取出 Stem 与 Blossom 两个网格再配合InstancedMesh与MeshSurfaceSampler完成大规模实例化散布。读完本文你将掌握一份 GLTF 模型的资源溯源与二次加工思路以及将单朵花复制为上千朵、并叠加逐实例上色与生命周期动画的完整做法。资源溯源Kenney Nature Pack 与 CC0 1.0根据 Flower/README.md 的记录该模型原始出处为 Kenney 的 Nature Pack作者为 Kenney采用CC0 1.0公有领域授权协议。这意味着模型可被自由使用、修改与再分发无需署名署名仍属于良好习惯也没有商用限制这也是它适合被内置进 three.js 官方示例、随仓库长期分发的授权基础。随后Don McCurdy 对该模型进行了两项关键修改拆分花茎Stem与花朵Blossom两个网格把原本可能是一体的模型拆成两个独立网格为后续按部位分别处理例如花茎统一绿色、花朵随机着色提供了结构前提颜色调整对模型配色进行了微调使其更符合示例场景的视觉风格。这两点修改直接服务于示例中茎干与花朵分离实例化的渲染需求也让该模型成为展示 GLTF 节点结构解析的典型案例。模型在仓库中的位置与使用方式仓库中该资源仅包含两个文件文件说明Flower.glb二进制 GLTFglTF Binary格式的模型本体README.md资源出处、授权与修改说明.glb 为二进制容器格式将 JSON 描述与几何、材质、贴图等二进制数据打包为单个文件加载更快、便于分发。three.js 通过examples/jsm/loaders/GLTFLoader.js解析该格式。在 webgl_instancing_scatter.html 中模型通过以下方式加载const loader new GLTFLoader(); loader.load( ./models/gltf/Flower/Flower.glb, function ( gltf ) { const _stemMesh gltf.scene.getObjectByName( Stem ); const _blossomMesh gltf.scene.getObjectByName( Blossom ); // ... } );关键点在于加载回调中通过gltf.scene.getObjectByName()按节点名精确取出Stem与Blossom两个网格。这正是 README 中拆分网格修改的意义——若模型未拆分就无法对茎与花分别做几何克隆、上色与实例化。这个用法也验证了加载器对 glTF 场景层级中命名节点的完整保留能力。运行官方示例本地起服务与加载资源由于示例通过 ES Module 的 importmap 引用构建产物与./jsm/下的模块且需要请求本地.glb模型文件直接双击打开 HTML 会因 CORS 限制而失败。需要以 HTTP 服务方式访问。仓库提供了现成脚本npm run dev该命令见 package.json会先执行构建任务再启动utils/server.js静态服务器默认端口 8080。服务器在 utils/server.js 中为.glb注册了model/gltf-binaryMIME 类型确保二进制模型可被正确请求。启动后访问http://localhost:8080/examples/webgl_instancing_scatter.html即可看到花朵散布效果。该示例运行截图可在 examples/screenshots/webgl_instancing_scatter.jpg 查看。从单朵花到 2000 朵实例化渲染管线示例的核心思路是一次加载、两次克隆、批量实例化。加载后立即克隆两个网格的几何体并应用统一的预变换矩阵const defaultTransform new THREE.Matrix4() .makeRotationX( Math.PI ) .multiply( new THREE.Matrix4().makeScale( 7, 7, 7 ) ); stemGeometry.applyMatrix4( defaultTransform ); blossomGeometry.applyMatrix4( defaultTransform );Matrix4的链接调用先绕 X 轴旋转 π再放大 7 倍将花朵朝向与尺寸统一到示例场景坐标系中。随后分别创建两个InstancedMeshsrc/objects/InstancedMesh.jsstemMesh new THREE.InstancedMesh( stemGeometry, stemMaterial, count ); blossomMesh new THREE.InstancedMesh( blossomGeometry, blossomMaterial, count );InstancedMesh是Mesh的特化版本用于以不同世界变换渲染大量共享几何与材质的对象其构造参数为( geometry, material, count )内部为每个实例分配一个 16 元素的instanceMatrix属性Float32Array( count * 16 )将原本 count 次 draw call 压缩为 1 次是降低渲染开销的核心手段。示例中count 2000即 2000 根花茎与 2000 朵花各只需一份几何数据。为了让花朵呈现多彩效果示例对每朵花的颜色进行随机赋值webgl_instancing_scatter.htmlconst color new THREE.Color(); const blossomPalette [ 0xF20587, 0xF2D479, 0xF2C879, 0xF2B077, 0xF24405 ]; for ( let i 0; i count; i ) { color.setHex( blossomPalette[ Math.floor( Math.random() * blossomPalette.length ) ] ); blossomMesh.setColorAt( i, color ); }setColorAt( i, color )写入instanceColor属性修改实例数据后需将相关属性标记为需要更新示例在创建时调用stemMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); blossomMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );同时每一帧更新后还会设置instanceMatrix.needsUpdate true并调用computeBoundingSphere()以保证裁剪与渲染正确见示例resample()与render()函数。曲面散布MeshSurfaceSampler 与逐实例动画花朵如何长在圆环结曲面上答案在examples/jsm/math/MeshSurfaceSampler.js。示例用TorusKnotGeometry作为散布表面构建采样器sampler new MeshSurfaceSampler( surface ) .setWeightAttribute( api.distribution weighted ? uv : null ) .build();随机模式distribution random忽略权重属性在三角面内均匀随机采样加权模式distribution weighted传入uv作为权重属性使采样概率与 uv 值关联可制造密度不均的分布。每次重采样时对每个实例调用sampler.sample( _position, _normal )得到表面上的位置与法线随后让花朵对准法线方向_normal.add( _position ); dummy.position.copy( _position ); dummy.scale.set( scales[ i ], scales[ i ], scales[ i ] ); dummy.lookAt( _normal ); dummy.updateMatrix(); stemMesh.setMatrixAt( i, dummy.matrix ); blossomMesh.setMatrixAt( i, dummy.matrix );lookAt( _normal )使花朵头朝外地立在曲面上setMatrixAt将临时 Object3D 的矩阵写入两个实例网格的同一索引保证茎与花同步变换。示例还通过scaleCurve()缓动函数easeOutCubic的组合模拟花朵生长—稳定—消失的生命周期配合每帧ages[i] 0.005的更新循环updateParticle实现了 2000 朵花不断再生的动态效果。许可证与二次加工注意事项CC0 1.0模型属于公有领域可在任意项目含商业项目中自由使用与修改无需署名二次加工痕迹当前模型已按 three.js 示例需求拆分网格并调整颜色与 Kenney 原始 Nature Pack 版本不完全一致节点名约定Stem 与 Blossom 是当前仓库版本的关键节点名示例代码依赖它们进行检索若自行替换模型需保持或调整getObjectByName的入参。小结Flower 模型虽小却是贯穿 three.js 数个能力点的理想载体从 GLTF 资源的授权与二次加工到GLTFLoader的节点检索再到InstancedMesh的批量实例化、setColorAt的逐实例上色与MeshSurfaceSampler的曲面散布动画。对照 Flower/README.md 的修改说明与 webgl_instancing_scatter.html 的完整实现可以清晰看到一份资源 → 一个官方示例 → 一类可复用渲染技术的完整链路值得作为 GLTF 资源实战与实例化渲染入门的研读样本。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 three.js 中的 Flower 模型：源于 Kenney Nature Pack 的花朵 GLTF 资源及其实例化散布实践
three.js 中的 Flower 模型源于 Kenney Nature Pack 的花朵 GLTF 资源及其实例化散布实践【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsFlower 是 three.js 官方仓库中一份经过二次加工的低多边形花朵模型资源源文件为 Flower.glb由 Kenney 的 Nature Pack 演化而来。本文围绕 Flower/README.md 讲述该资源的出处、修改内容与许可证并以官方示例 webgl_instancing_scatter.html 为实战入口演示如何用GLTFLoader加载它、按节点名取出 Stem 与 Blossom 两个网格再配合InstancedMesh与MeshSurfaceSampler完成大规模实例化散布。读完本文你将掌握一份 GLTF 模型的资源溯源与二次加工思路以及将单朵花复制为上千朵、并叠加逐实例上色与生命周期动画的完整做法。资源溯源Kenney Nature Pack 与 CC0 1.0根据 Flower/README.md 的记录该模型原始出处为 Kenney 的 Nature Pack作者为 Kenney采用CC0 1.0公有领域授权协议。这意味着模型可被自由使用、修改与再分发无需署名署名仍属于良好习惯也没有商用限制这也是它适合被内置进 three.js 官方示例、随仓库长期分发的授权基础。随后Don McCurdy 对该模型进行了两项关键修改拆分花茎Stem与花朵Blossom两个网格把原本可能是一体的模型拆成两个独立网格为后续按部位分别处理例如花茎统一绿色、花朵随机着色提供了结构前提颜色调整对模型配色进行了微调使其更符合示例场景的视觉风格。这两点修改直接服务于示例中茎干与花朵分离实例化的渲染需求也让该模型成为展示 GLTF 节点结构解析的典型案例。模型在仓库中的位置与使用方式仓库中该资源仅包含两个文件文件说明Flower.glb二进制 GLTFglTF Binary格式的模型本体README.md资源出处、授权与修改说明.glb 为二进制容器格式将 JSON 描述与几何、材质、贴图等二进制数据打包为单个文件加载更快、便于分发。three.js 通过examples/jsm/loaders/GLTFLoader.js解析该格式。在 webgl_instancing_scatter.html 中模型通过以下方式加载const loader new GLTFLoader(); loader.load( ./models/gltf/Flower/Flower.glb, function ( gltf ) { const _stemMesh gltf.scene.getObjectByName( Stem ); const _blossomMesh gltf.scene.getObjectByName( Blossom ); // ... } );关键点在于加载回调中通过gltf.scene.getObjectByName()按节点名精确取出Stem与Blossom两个网格。这正是 README 中拆分网格修改的意义——若模型未拆分就无法对茎与花分别做几何克隆、上色与实例化。这个用法也验证了加载器对 glTF 场景层级中命名节点的完整保留能力。运行官方示例本地起服务与加载资源由于示例通过 ES Module 的 importmap 引用构建产物与./jsm/下的模块且需要请求本地.glb模型文件直接双击打开 HTML 会因 CORS 限制而失败。需要以 HTTP 服务方式访问。仓库提供了现成脚本npm run dev该命令见 package.json会先执行构建任务再启动utils/server.js静态服务器默认端口 8080。服务器在 utils/server.js 中为.glb注册了model/gltf-binaryMIME 类型确保二进制模型可被正确请求。启动后访问http://localhost:8080/examples/webgl_instancing_scatter.html即可看到花朵散布效果。该示例运行截图可在 examples/screenshots/webgl_instancing_scatter.jpg 查看。从单朵花到 2000 朵实例化渲染管线示例的核心思路是一次加载、两次克隆、批量实例化。加载后立即克隆两个网格的几何体并应用统一的预变换矩阵const defaultTransform new THREE.Matrix4() .makeRotationX( Math.PI ) .multiply( new THREE.Matrix4().makeScale( 7, 7, 7 ) ); stemGeometry.applyMatrix4( defaultTransform ); blossomGeometry.applyMatrix4( defaultTransform );Matrix4的链接调用先绕 X 轴旋转 π再放大 7 倍将花朵朝向与尺寸统一到示例场景坐标系中。随后分别创建两个InstancedMeshsrc/objects/InstancedMesh.jsstemMesh new THREE.InstancedMesh( stemGeometry, stemMaterial, count ); blossomMesh new THREE.InstancedMesh( blossomGeometry, blossomMaterial, count );InstancedMesh是Mesh的特化版本用于以不同世界变换渲染大量共享几何与材质的对象其构造参数为( geometry, material, count )内部为每个实例分配一个 16 元素的instanceMatrix属性Float32Array( count * 16 )将原本 count 次 draw call 压缩为 1 次是降低渲染开销的核心手段。示例中count 2000即 2000 根花茎与 2000 朵花各只需一份几何数据。为了让花朵呈现多彩效果示例对每朵花的颜色进行随机赋值webgl_instancing_scatter.htmlconst color new THREE.Color(); const blossomPalette [ 0xF20587, 0xF2D479, 0xF2C879, 0xF2B077, 0xF24405 ]; for ( let i 0; i count; i ) { color.setHex( blossomPalette[ Math.floor( Math.random() * blossomPalette.length ) ] ); blossomMesh.setColorAt( i, color ); }setColorAt( i, color )写入instanceColor属性修改实例数据后需将相关属性标记为需要更新示例在创建时调用stemMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); blossomMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );同时每一帧更新后还会设置instanceMatrix.needsUpdate true并调用computeBoundingSphere()以保证裁剪与渲染正确见示例resample()与render()函数。曲面散布MeshSurfaceSampler 与逐实例动画花朵如何长在圆环结曲面上答案在examples/jsm/math/MeshSurfaceSampler.js。示例用TorusKnotGeometry作为散布表面构建采样器sampler new MeshSurfaceSampler( surface ) .setWeightAttribute( api.distribution weighted ? uv : null ) .build();随机模式distribution random忽略权重属性在三角面内均匀随机采样加权模式distribution weighted传入uv作为权重属性使采样概率与 uv 值关联可制造密度不均的分布。每次重采样时对每个实例调用sampler.sample( _position, _normal )得到表面上的位置与法线随后让花朵对准法线方向_normal.add( _position ); dummy.position.copy( _position ); dummy.scale.set( scales[ i ], scales[ i ], scales[ i ] ); dummy.lookAt( _normal ); dummy.updateMatrix(); stemMesh.setMatrixAt( i, dummy.matrix ); blossomMesh.setMatrixAt( i, dummy.matrix );lookAt( _normal )使花朵头朝外地立在曲面上setMatrixAt将临时 Object3D 的矩阵写入两个实例网格的同一索引保证茎与花同步变换。示例还通过scaleCurve()缓动函数easeOutCubic的组合模拟花朵生长—稳定—消失的生命周期配合每帧ages[i] 0.005的更新循环updateParticle实现了 2000 朵花不断再生的动态效果。许可证与二次加工注意事项CC0 1.0模型属于公有领域可在任意项目含商业项目中自由使用与修改无需署名二次加工痕迹当前模型已按 three.js 示例需求拆分网格并调整颜色与 Kenney 原始 Nature Pack 版本不完全一致节点名约定Stem 与 Blossom 是当前仓库版本的关键节点名示例代码依赖它们进行检索若自行替换模型需保持或调整getObjectByName的入参。小结Flower 模型虽小却是贯穿 three.js 数个能力点的理想载体从 GLTF 资源的授权与二次加工到GLTFLoader的节点检索再到InstancedMesh的批量实例化、setColorAt的逐实例上色与MeshSurfaceSampler的曲面散布动画。对照 Flower/README.md 的修改说明与 webgl_instancing_scatter.html 的完整实现可以清晰看到一份资源 → 一个官方示例 → 一类可复用渲染技术的完整链路值得作为 GLTF 资源实战与实例化渲染入门的研读样本。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考