一个非常实用的Three.js3D模型爆破💥和切割开源插件

答案answer2026-03-02 9:40

前言

给大家分享一个非常实用Three.js3D模型爆破切割插件，这个插件能够使前端可以直接在浏览器中，对 3D 模型进行实时且物理效果真实的 "爆破" 、"粉碎" 或 "切片" 处理。

安装

安装也是非常的简单直接通过 npm 安装即可

但需要注意的是Three.js版本需要大于 0.158

js 复制代码

npm install @dgreenheck/three-pinata

使用

使用也是非常的简单只要将插件提供的方法引入即可

DestructibleMesh 用于创建可切割或爆破的物体物体

FractureOptions 用于设置参数配置

js 复制代码

import { DestructibleMesh, FractureOptions } from "@dgreenheck/three-pinata";

const outerMaterial = new THREE.MeshStandardMaterial({ color: 0x4a90e2 });
const innerMaterial = new THREE.MeshStandardMaterial({ color: 0xff6b6b });

const mesh = new DestructibleMesh(geometry, outerMaterial, innerMaterial);
scene.add(mesh);

const options = new FractureOptions({
  fractureMethod: "voronoi",
  fragmentCount: 16,
  voronoiOptions: {
    mode: "3D",
  },
});
const fragments = mesh.fracture(options);

fragments.forEach((fragment) => scene.add(fragment));
mesh.visible = false;

参数方法

该插件大概提供了7种不同的针对3D模型爆破和切割的场景方法，并且官网示例都可以直接查看演示效果

比如这个砸碎物体方法：

又或者说这个物体切片方法：

项目仓库

该项目插件是一个外国大佬开发，如果有使用Three.js开发一个小游戏的需求，或者说想丰富一下你的3D网站这个插件都会可以给你提供不错的帮助的

项目演示地址：three-pinata-demo.vercel.app/

Github: github.com/dgreenheck/...