Three.js 进阶之旅：物理效果-碰撞和声音 💥

Posted 2023-02-17 dragonir

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js 在 Three.js 中创建一个 3D 物理世界，并在物理世界更新对象、联系材质、施加外力、处理多个物体中添加物体之间的碰撞效果，通过检测碰撞激烈程度来添加撞击声音等。

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

摘要

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js 在 Three.js 中创建一个 3D 物理世界，并在物理世界更新对象、联系材质、施加外力、处理多个物体中添加物体之间的碰撞效果，通过检测碰撞激烈程度来添加撞击声音等。

效果

本文最终将实现如下所示的效果，点击 DAT.GUI 中创建立方体

以上是关于Three.js 进阶之旅：物理效果-碰撞和声音 💥的主要内容，如果未能解决你的问题，请参考以下文章

Three.js 进阶之旅：滚动控制模型动画和相机动画 🦢

Three.js 进阶之旅：新春特典-Rabbit craft go 🐇

Three.js 进阶之旅：全景漫游-初阶移动相机版

Three.js 进阶之旅：全景漫游-初阶移动相机版

Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡

Three.js 进阶之旅：页面平滑滚动-王国之泪 💧