【threejs教程13】threejs添加物理碰撞

【图中完整效果代码位于文章末】

        在Web开发中，结合Three.js的强大3D渲染能力和CANNON.js的物理模拟功能，我们可以创造出既美观又真实的物理交互场景。本文将引导你完成一个简单的项目，展示如何使用Three.js和CANNON.js创建一个带有物理碰撞的小球与平面场景。我们将从环境搭建开始，逐步深入到物体创建、物理规则设置以及渲染循环的建立。

目录

环境准备

引入依赖

初始化场景与相机

创建物理世界

创建3D物体

设置材质接触属性

光照与渲染

总结 

完整代码如下

---

环境准备

---

        首先，确保你的项目中已安装了Three.js和CANNON.js库。对于Vue项目，你可以在项目中通过npm安装这两个库：

npm install three cannon-es

引入依赖

---

        在Vue组件中，我们首先引入必要的模块：

<script setup>
import * as THREE from 'three';
import { onMounted } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as CANNON from 'cannon-es';
</script>

初始化场景与相机

---

        接下来，初始化Three.js的基本元素：场景、相机、渲染器以及OrbitControls用于视角操控：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
const controls = new OrbitControls(camera, renderer.domElement);

创建物理世界

---

        使用CANNON.js创建物理世界，并设置重力：

const world = new CANNON.World();
world.gravity.set(0, -9.8, 0); // 重力向下的设置

创建3D物体

---

        我们创建一个小球和一个地面。在Three.js中，这涉及到几何体、材质以及网格的创建；而在CANNON.js中，则需要创建相应的物理形状和body：

// Thre