Three.js--》探寻Cannon.js构建震撼的3D物理交互体验（一）

我们用three.js可以绘制出各种酷炫的画面，但是当我们想要一个更加真实的物理效果的话，这个时候我们就需要一个物理的库，接下来我们就讲解一下今天要学习的canon，它可以给我们提供一个更加真实的物理效果，像物体的张力、摩擦力、拉伸、反弹等等各种真实的物理效果。该库都能够有一个非常好的模拟。

PS：目前博主在一家互联网公司工作，该公司的编码风格是vue+tsx，所以接下来的项目以该编码风格进行举例，详细了解参考我之前的文章：地址 。

目录

canon基本使用

基础碰撞使用

材质与摩擦系数设置

弹性与接触材质设置

碰撞与碰撞组

canon基本使用

Cannon 是一种轻量级的 JavaScript 3D 物理引擎，用于实现虚拟世界中的物理模拟和交互。它提供了一套强大的功能，能够处理刚体碰撞、力学模拟、约束系统等物理效果，使开发者能够在 Web 应用程序和游戏中实现逼真的物理行为。

Cannon的官网：地址 ，提供了一系列关于物理运动在three世界的实现，实现案例 的效果非常直观，展示了物理运动的魅力，如下：

接下来我们在three.js的vue项目中使用Cannon，终端执行如下命令安装，具体参考：官网

npm i cannon-es

接下来我们通过tsx风格语法撰写three基础项目实现：

import { defineComponent } from "vue";
import * as THREE from 'three'
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls.js'
import * as CANNON from 'cannon-es'
import './index.scss'
import { div } from "three/examples/jsm/nodes/Nodes.js";export default defineComponent({setup() {// 初始化物理世界const world = new CANNON.World()// 初始化物理世界的重力world.gravity.set(0, -9.82, 0)// 初始化3D世界const scene = new THREE.Scene()// 初始化相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.z = 3// 初始化渲染器const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 初始化控制器const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = true// 渲染let clock = new THREE.Clock()const animate = () => {let delta = clock.getDelta()controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}animate()return () => {<div></div>}}
})

接下来我们需要给场景添加一些物体，如下：

// 创建一个物理球体，半径为0.5
const sphereShape = new CANNON.Sphere(0.5)
// 创建一个刚体
const sphereBody = new CANNON.Body({mass: 1,shape: sphereShape,position: new CANNON.Vec3(0, 5, 0)
})
// 将刚体添加到物理世界中
world.addBody(sphereBody)
// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个球
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32) // 创建一个几何体
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 创建一个球体材质
const shpereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial) // 创建一个球体网格
// 将网格添加到3D场景中
scene.add(shpereMesh)

打开控制台，可以看到我们的球体已经显示出来了：

接下来我们要把物理世界的球体给到我们three渲染出来的球体，让两者开始关联起来。在每一帧中，根据物理引擎模拟的结果来更新 Three.js 场景中球体网格的位置和旋转状态，从而实现了基于物理引擎的球体模拟效果，如下：

得到的结果如下：

基础碰撞使用

上面我们实现了一个物体的自由下落，接下来我们实现物体与平面的碰撞效果。如下添加平面：

// 创建一个物理世界的平面
const planeShape = new CANNON.Plane()
// 创建一个刚体
const planeBody = new CANNON.Body({mass: 0, // 设置质量为0，不受碰撞的影响shape: planeShape,position: new CANNON.Vec3(0, 0, 0)
})
// 设置刚体旋转（设置旋转X轴）
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
// 将刚体添加到物理世界当中
world.addBody(planeBody)
// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个平面
const planeGeometry = new THREE.PlaneGeometry(10, 10) // 因为渲染的东西不是无限衍生，这里给10x10
// 创建一个平面材质
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 创建一个平面网格
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
// 旋转平面90度让其平铺
planeMesh.rotation.x = -Math.PI / 2
// 将网格添加到3D场景当中
scene.add(planeMesh)

当然除了我们设置平面质量为0之外，我们也可以设置平面为静态效果，也不受碰撞影响：

最终得到的效果如下:

那我们让物理世界和渲染世界的平面倾斜度加上0.1，小球是否会滑落而掉下去呢？测试一下：

得到的效果如下，可见小球是不会掉落下去的，因为物理世界的平面是无限衍生的，即使渲染世界的平面有限，小球仍然会走物理世界的规律，如下：

如果我们想在物理世界有一个有限大的平面的话， 我们可以通过构建一个立方体，然后把立方体压扁形成一个平面来使用，因为立方体已经有高度了，所以我们也不需要在旋转90度了，稍微给点倾斜度0.1即可，代码如下：

得到的效果如下，可见到我们的小球已经实现了掉落的效果：

上面两标题的案例代码如下：

import { defineComponent } from "vue";
import * as THREE from 'three'
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls.js'
import * as CANNON from 'cannon-es'
import './index.scss'export default defineComponent({setup() {// 初始化物理世界const world = new CANNON.World()// 初始化物理世界的重力world.gravity.set(0, -9.82, 0)// 初始化3D世界const scene = new THREE.Scene()// 初始化相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.z = 3// 初始化渲染器const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 初始化控制器const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = true// 创建一个物理球体，半径为0.5const sphereShape = new CANNON.Sphere(0.5)// 创建一个刚体const sphereBody = new CANNON.Body({mass: 1,shape: sphereShape,position: new CANNON.Vec3(0, 5, 0)})// 将刚体添加到物理世界中world.addBody(sphereBody)// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个球const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32) // 创建一个几何体const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 创建一个球体材质const shpereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial) // 创建一个球体网格// 将网格添加到3D场景中scene.add(shpereMesh)// 创建一个物理世界的平面// const planeShape = new CANNON.Plane()const planeShape = new CANNON.Box(new CANNON.Vec3(5, 0.1, 5))// 创建一个刚体const planeBody = new CANNON.Body({// mass: 0, // 设置质量为0，不受碰撞的影响shape: planeShape,position: new CANNON.Vec3(0, 0, 0),type: CANNON.Body.STATIC // 设置物体为静态，不受碰撞的影响})// 设置刚体旋转（设置旋转X轴）planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1)// 将刚体添加到物理世界当中world.addBody(planeBody)// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个平面// const planeGeometry = new THREE.PlaneGeometry(10, 10) // 因为渲染的东西不是无限衍生，这里给10x10const planeGeometry = new THREE.BoxGeometry(10, 0.2, 10)// 创建一个平面材质const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })// 创建一个平面网格const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)// 旋转平面90度让其平铺planeMesh.rotation.x = 0.1// 将网格添加到3D场景当中scene.add(planeMesh)// 渲染let clock = new THREE.Clock()const animate = () => {// 获取了两次渲染之间的时间差，通常用于控制动画和物理模拟。let delta = clock.getDelta()// 使用时间差来推进物理世界的模拟world.step(delta)// 更新球体网格的位置和旋转// 将物理引擎中球体的位置赋值给 Three.js 中球体网格（shpereMesh）的位置，从而将物理模拟的结果更新到可视化场景中。shpereMesh.position.copy(sphereBody.position)// 将物理引擎中球体的旋转状态赋值给 Three.js 中球体网格（shpereMesh）的旋转状态，确保网格的旋转与物理模拟一致。shpereMesh.quaternion.copy(sphereBody.quaternion)controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}animate()return () => {<div></div>}}
})

材质与摩擦系数设置

cannon的材质可以模拟我们现实生活当中的物理的效果，比如说我们可以设置它的摩擦系数，弹性系数来实现我们这个物体的滑动的有摩擦的效果。借助上面的案例，我们将球体换成立方体，因为要创建多个立方体，这里我们设置一个变量用于存储

// 创建网格数组
let phyMeshes: any[] = [] // 物理世界
let meshes: any[] = [] // 渲染世界// 创建物理立方体
const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))
// 设置立方体的材质
const boxMaterialCon = new CANNON.Material("boxMaterial")
// 创建一个刚体
const boxBody = new CANNON.Body({shape: boxShape,position: new CANNON.Vec3(0, 15, 0),mass: 1,material: boxMaterialCon
})
// 将刚体添加到物理世界当中
world.addBody(boxBody)
phyMeshes.push(boxBody)
// 创建立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1)
// 创建立方体材质
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 创建立方体网格
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)
// 将网格添加到3D场景当中
scene.add(boxMesh)
meshes.push(boxMesh)

在渲染函数处，我们变量数组来推进物理世界模拟：

最终得到是效果如下：

接下来我们添加第二个物体，将第二个物体的摩擦系数设置为0，第一个物体和平面的摩擦系数设置为0.7，代码如下：

// 创建网格数组
let phyMeshes: any[] = [] // 物理世界
let meshes: any[] = [] // 渲染世界// 创建物理立方体
const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))
// 设置立方体的材质
const boxMaterialCon = new CANNON.Material("boxMaterial")
boxMaterialCon.friction = 0.7
// 创建一个刚体
const boxBody = new CANNON.Body({shape: boxShape,position: new CANNON.Vec3(0, 15, 0),mass: 1,material: boxMaterialCon
})
// 将刚体添加到物理世界当中
world.addBody(boxBody)
phyMeshes.push(boxBody)
// 创建立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1)
// 创建立方体材质
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 创建立方体网格
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)
// 将网格添加到3D场景当中
scene.add(boxMesh)
meshes.push(boxMesh)// 创建第二个物理立方体（使用第一个物理立方体的内容，材质不同）
const boxSlipperyMaterial = new CANNON.Material("boxSlipperyMaterial")
boxSlipperyMaterial.friction = 0 // 摩擦系数为0
// 创建刚体
const boxBody2 = new CANNON.Body({shape: boxShape,position: new CANNON.Vec3(1, 5, 0), // 区别于第一个物体，位置改变一下mass: 1,material: boxSlipperyMaterial
})
// 将刚体添加到物理世界当中
world.addBody(boxBody2)
phyMeshes.push(boxBody2)
// 创建立方体几何体（使用第一个物体的内容）
const boxMesh2 = new THREE.Mesh(boxGeometry, boxMaterial)
// 将网格添加到3D场景当中
scene.add(boxMesh2)
meshes.push(boxMesh2)// 创建一个物理世界的平面
// const planeShape = new CANNON.Plane()
const planeShape = new CANNON.Box(new CANNON.Vec3(5, 0.1, 5))
// 创建一个刚体
const planeBody = new CANNON.Body({// mass: 0, // 设置质量为0，不受碰撞的影响shape: planeShape,position: new CANNON.Vec3(0, 0, 0),type: CANNON.Body.STATIC, // 设置物体为静态，不受碰撞的影响material: boxMaterialCon
})
// 设置刚体旋转（设置旋转X轴）
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1)
// 将刚体添加到物理世界当中
world.addBody(planeBody)
// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个平面
// const planeGeometry = new THREE.PlaneGeometry(10, 10) // 因为渲染的东西不是无限衍生，这里给10x10
const planeGeometry = new THREE.BoxGeometry(10, 0.2, 10)
// 创建一个平面材质
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 创建一个平面网格
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
// 旋转平面90度让其平铺
planeMesh.rotation.x = 0.1
// 将网格添加到3D场景当中
scene.add(planeMesh)

最终得到的效果如下，可以看到我们设置的第二个物体因为很光滑，所以很容易就滑落下去：

弹性与接触材质设置

上文我们介绍了摩擦效果的操作，接下来我们继续开始讲解物体的弹性操作，我们根据上文的代码，再创建第三个立方体，然后给该立方体添加弹性系数

// 创建第三个物理立方体（使用第一个物理立方体的内容，材质不同）
const boxBouncyMaterial = new CANNON.Material("boxBouncyMaterial")
boxBouncyMaterial.friction = 0.1
boxBouncyMaterial.restitution = 1 // 设置弹性系数为1
// 创建刚体
const boxBody3 = new CANNON.Body({shape: boxShape,mass: 1,position: new CANNON.Vec3(2, 5, 3),material: boxBouncyMaterial
})
// 将刚体添加到物理世界当中
world.addBody(boxBody3)
phyMeshes.push(boxBody3)
// 创建几何体（使用第一个立方体的内容以及材质）
const boxMesh3 = new THREE.Mesh(boxGeometry, boxMaterial) // 添加网格
// 将网格添加到3D场景当中
scene.add(boxMesh3)
meshes.push(boxMesh3)

给立方体设置弹性系数之后，如果我们想让弹性效果奏效的话，我们也需要给平面网格设置相同的弹性系数，因为平面网格使用的材质是第一个立方体的材质，所以我们只要给第一个立方体设置弹性系数即可，如下：

最终得到的效果如下，可以看到设置高度高的物体，从高处下落反弹的效果是很直观的：

当然我们也没有必要单独设置一下立方体和平面的弹性和摩擦系数，我们也可以通过接触材质的系数设置两个材质之间的一个弹性和摩擦系数，来实现相应的效果，如下：

// 创建第三个物理立方体（使用第一个物理立方体的内容，材质不同）
const boxBouncyMaterial = new CANNON.Material("boxBouncyMaterial")
// boxBouncyMaterial.friction = 0.1
// boxBouncyMaterial.restitution = 1 // 设置弹性系数为1
// 创建刚体
const boxBody3 = new CANNON.Body({shape: boxShape,mass: 1,position: new CANNON.Vec3(2, 5, 3),material: boxBouncyMaterial
})
// 将刚体添加到物理世界当中
world.addBody(boxBody3)
phyMeshes.push(boxBody3)
// 创建几何体（使用第一个立方体的内容以及材质）
const boxMesh3 = new THREE.Mesh(boxGeometry, boxMaterial) // 添加网格
// 将网格添加到3D场景当中
scene.add(boxMesh3)
meshes.push(boxMesh3)
// 定义接触材质
const material3toplane = new CANNON.ContactMaterial(boxMaterialCon,boxBouncyMaterial,{friction: 0,restitution:  1}
)
// 将接触材质添加到物理世界当中
world.addContactMaterial(material3toplane)

最终呈现的效果依然很明显：

碰撞与碰撞组

Cannon中的碰撞指的是游戏开发中物体之间的相互作用，通常包括物体之间的碰撞检测和碰撞响应两个部分。碰撞检测用于判断物体是否发生了碰撞，而碰撞响应则是在发生碰撞时对物体进行相应的处理，比如改变物体的速度、方向等。如下我们设置代码来实现：

依次创建立方体、球体、圆柱体到场景当中，举例代码如下：

接下来我们给创建到场景的立方体添加一个初速度使其运动来碰撞另外两个物体，如下：

这里给出完整的代码来给大家进行学习：

import { defineComponent } from "vue";
import * as THREE from 'three'
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls.js'
import * as CANNON from 'cannon-es'
import './index.scss'export default defineComponent({setup() {// 初始化物理世界const world = new CANNON.World()// 初始化物理世界的重力world.gravity.set(0, -9.82, 0)// 初始化3D世界const scene = new THREE.Scene()// 初始化相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.z = 8camera.position.y = 5camera.position.x = 2// 初始化渲染器const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 初始化控制器const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = true// 创建网格数组let phyMeshes: any[] = [] // 物理世界let meshes: any[] = [] // 渲染世界// 创建物理立方体const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))// 设置立方体的材质const boxMaterialCon = new CANNON.Material("boxMaterial")boxMaterialCon.friction = 0// 创建一个刚体const boxBody = new CANNON.Body({shape: boxShape,position: new CANNON.Vec3(2, 0.8, 0),mass: 1,material: boxMaterialCon})// 将刚体添加到物理世界当中world.addBody(boxBody)phyMeshes.push(boxBody)// 创建立方体几何体const boxGeometry = new THREE.BoxGeometry(1, 1, 1)// 创建立方体材质const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 创建立方体网格const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)// 将网格添加到3D场景当中scene.add(boxMesh)meshes.push(boxMesh)// 创建物理球const spereShape = new CANNON.Sphere(0.5)// 创建一个刚体const sphereBody = new CANNON.Body({shape: spereShape,position: new CANNON.Vec3(0, 0.8, 0),mass: 1,material: boxMaterialCon})// 将刚体添加到物理世界当中world.addBody(sphereBody)phyMeshes.push(sphereBody)// 创建球的几何体const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32)// 创建球的材质const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff })// 创建球网格const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)// 将网格添加到3D场景当中scene.add(sphereMesh)meshes.push(sphereMesh)// 创建物理圆柱体const cylinderShape = new CANNON.Cylinder(0.5, 0.5, 1, 32)// 创建一个刚体const cylinderBody = new CANNON.Body({shape: cylinderShape,position: new CANNON.Vec3(-2, 0.8, 0),mass: 1,material: boxMaterialCon})// 将刚体添加到物理世界当中world.addBody(cylinderBody)phyMeshes.push(cylinderBody)// 创建圆柱体几何体const cylinderGeometry = new THREE.CylinderGeometry(0.5 ,0.5, 1, 32)// 创建圆柱体材质const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })// 创建圆柱体网格const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial)// 将网格添加到3D场景当中scene.add(cylinderMesh)meshes.push(cylinderMesh)// 创建一个物理世界的平面// const planeShape = new CANNON.Plane()const planeShape = new CANNON.Box(new CANNON.Vec3(5, 0.1, 5))// 创建一个刚体const planeBody = new CANNON.Body({// mass: 0, // 设置质量为0，不受碰撞的影响shape: planeShape,position: new CANNON.Vec3(0, 0, 0),type: CANNON.Body.STATIC, // 设置物体为静态，不受碰撞的影响material: boxMaterialCon})// 设置刚体旋转（设置旋转X轴）// planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1)// 将刚体添加到物理世界当中world.addBody(planeBody)// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个平面// const planeGeometry = new THREE.PlaneGeometry(10, 10) // 因为渲染的东西不是无限衍生，这里给10x10const planeGeometry = new THREE.BoxGeometry(10, 0.2, 10)// 创建一个平面材质const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })// 创建一个平面网格const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)// 旋转平面90度让其平铺// planeMesh.rotation.x = 0.1// 将网格添加到3D场景当中scene.add(planeMesh)// 设置立方体的初始速度boxBody.velocity.set(-2, 0, 0)// 渲染let clock = new THREE.Clock()const animate = () => {// 获取了两次渲染之间的时间差，通常用于控制动画和物理模拟。let delta = clock.getDelta()world.step(delta)// 使用时间差来推进物理世界的模拟for(let i = 0; i < phyMeshes.length; i++) {meshes[i].position.copy(phyMeshes[i].position)meshes[i].quaternion.copy(phyMeshes[i].quaternion)}controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}animate()return () => {<div></div>}}
})

接下来实现碰撞组，碰撞组是为了更高效地管理和处理碰撞而引入的概念。通过将具有相似碰撞特性的物体分组，可以在碰撞检测和碰撞响应时只考虑同一组内的物体之间的碰撞，从而减少不必要的计算量，提高游戏的性能和效率。代码如下：

我们设置立方体为组1，然后碰撞掩码就是能够和谁发生碰撞，我们设置立方体可以和所有物体碰撞：

在球体的分组当中，我们设置碰撞掩码如下，可以看到我们的球不能碰撞圆柱体：

最终呈现的效果如下：

给出案例的完整代码供大家学习：

import { defineComponent } from "vue";
import * as THREE from 'three'
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls.js'
import * as CANNON from 'cannon-es'
import './index.scss'export default defineComponent({setup() {// 初始化物理世界const world = new CANNON.World()// 初始化物理世界的重力world.gravity.set(0, -9.82, 0)// 初始化3D世界const scene = new THREE.Scene()// 初始化相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.z = 8camera.position.y = 5camera.position.x = 2// 初始化渲染器const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 初始化控制器const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = true// 创建网格数组let phyMeshes: any[] = [] // 物理世界let meshes: any[] = [] // 渲染世界// 设置碰撞组，数值要用2的幂const GROUP1 = 1 // 分组立方体const GROUP2 = 2 // 分组球体const GROUP3 = 4 // 分组圆柱体const GROUP4 = 8 // 分组平面// 创建物理立方体const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))// 设置立方体的材质const boxMaterialCon = new CANNON.Material("boxMaterial")boxMaterialCon.friction = 0// 创建一个刚体const boxBody = new CANNON.Body({shape: boxShape,position: new CANNON.Vec3(2, 0.8, 0),mass: 1,material: boxMaterialCon,collisionFilterGroup: GROUP1, // 设置碰撞组collisionFilterMask: GROUP2 | GROUP3 | GROUP4, // 碰撞掩码，可以和二组和三、四组碰撞})// 将刚体添加到物理世界当中world.addBody(boxBody)phyMeshes.push(boxBody)// 创建立方体几何体const boxGeometry = new THREE.BoxGeometry(1, 1, 1)// 创建立方体材质const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 创建立方体网格const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)// 将网格添加到3D场景当中scene.add(boxMesh)meshes.push(boxMesh)// 创建物理球const spereShape = new CANNON.Sphere(0.5)// 创建一个刚体const sphereBody = new CANNON.Body({shape: spereShape,position: new CANNON.Vec3(0, 0.8, 0),mass: 1,material: boxMaterialCon,collisionFilterGroup: GROUP2, // 设置碰撞组collisionFilterMask: GROUP1 | GROUP4, // 碰撞掩码，可以和一、四组碰撞})// 将刚体添加到物理世界当中world.addBody(sphereBody)phyMeshes.push(sphereBody)// 创建球的几何体const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32)// 创建球的材质const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff })// 创建球网格const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)// 将网格添加到3D场景当中scene.add(sphereMesh)meshes.push(sphereMesh)// 创建物理圆柱体const cylinderShape = new CANNON.Cylinder(0.5, 0.5, 1, 32)// 创建一个刚体const cylinderBody = new CANNON.Body({shape: cylinderShape,position: new CANNON.Vec3(-2, 0.8, 0),mass: 1,material: boxMaterialCon,collisionFilterGroup: GROUP3, // 设置碰撞组collisionFilterMask: GROUP1 | GROUP4, // 碰撞掩码，可以和一、四组碰撞})// 将刚体添加到物理世界当中world.addBody(cylinderBody)phyMeshes.push(cylinderBody)// 创建圆柱体几何体const cylinderGeometry = new THREE.CylinderGeometry(0.5 ,0.5, 1, 32)// 创建圆柱体材质const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })// 创建圆柱体网格const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial)// 将网格添加到3D场景当中scene.add(cylinderMesh)meshes.push(cylinderMesh)// 创建一个物理世界的平面// const planeShape = new CANNON.Plane()const planeShape = new CANNON.Box(new CANNON.Vec3(5, 0.1, 5))// 创建一个刚体const planeBody = new CANNON.Body({// mass: 0, // 设置质量为0，不受碰撞的影响shape: planeShape,position: new CANNON.Vec3(0, 0.1, 0),type: CANNON.Body.STATIC, // 设置物体为静态，不受碰撞的影响material: boxMaterialCon,collisionFilterGroup: GROUP4, // 设置碰撞组collisionFilterMask: GROUP1 | GROUP2 | GROUP3, // 碰撞掩码，可以和一组、二组和三组碰撞})// 设置刚体旋转（设置旋转X轴）// planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1)// 将刚体添加到物理世界当中world.addBody(planeBody)// 物理世界创建的东西不显示，所以我们要再通过three.js再创建一个平面// const planeGeometry = new THREE.PlaneGeometry(10, 10) // 因为渲染的东西不是无限衍生，这里给10x10const planeGeometry = new THREE.BoxGeometry(10, 0.2, 10)// 创建一个平面材质const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })// 创建一个平面网格const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)// 旋转平面90度让其平铺// planeMesh.rotation.x = 0.1// 将网格添加到3D场景当中scene.add(planeMesh)// 设置立方体的初始速度boxBody.velocity.set(-2, 0, 0)// 渲染let clock = new THREE.Clock()const animate = () => {// 获取了两次渲染之间的时间差，通常用于控制动画和物理模拟。let delta = clock.getDelta()world.step(delta)// 使用时间差来推进物理世界的模拟for(let i = 0; i < phyMeshes.length; i++) {meshes[i].position.copy(phyMeshes[i].position)meshes[i].quaternion.copy(phyMeshes[i].quaternion)}controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}animate()return () => {<div></div>}}
})

本篇文章对canon的学习暂时结束，下篇文章将对canon更加深入讲解！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/719732.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

YOLOv8姿态估计实战：训练自己的数据集

YOLOv8姿态估计实战：训练自己的数据集

课程链接&#xff1a;https://edu.csdn.net/course/detail/39355 YOLOv8 基于先前 YOLO 版本的成功&#xff0c;引入了新功能和改进&#xff0c;进一步提升性能和灵活性。YOLOv8 同时支持目标检测和姿态估计任务。 本课程以熊猫姿态估计为例&#xff0c;将手把手地教大家使用C…
阅读更多...
MSCKF5讲：后端代码分析

MSCKF5讲：后端代码分析

MSCKF5讲&#xff1a;后端代码分析 文章目录 MSCKF5讲&#xff1a;后端代码分析1 初始化initialize()1.1 加载参数1.2 初始化IMU连续噪声协方差矩阵1.3 卡方检验1.4 接收与订阅话题createRosIO() 2 IMU静止初始化3 重置resetCallback()4 featureCallback4.1 IMU初始化判断4.2 I…
阅读更多...
【文末送书】智能计算：原理与实践

【文末送书】智能计算：原理与实践

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统（Python+PySide6界面+训练代码）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统（Python+PySide6界面+训练代码）

摘要&#xff1a;开发停车位检测系统对于优化停车资源管理和提升用户体验至关重要。本篇博客详细介绍了如何利用深度学习构建一个停车位检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并结合了YOLOv7、YOLOv6、YOLOv5的性能对比&#xf…
阅读更多...
HarmonyOS端云体化开发—创建端云一体化开发工程

HarmonyOS端云体化开发—创建端云一体化开发工程

云开发工程模板 DevEco Studio目前提供了两种云开发工程模板&#xff1a;通用云开发模板和商城模板。您可根据工程向导轻松创建端云一体化开发工程&#xff0c;并自动生成对应的代码和资源模板。在创建端云一体化开发工程前&#xff0c;请提前了解云开发工程模板的相关信息。 …
阅读更多...
前端学习之HTML（第一天）

前端学习之HTML（第一天）

什么是HTML HTML是一种用来描述网页的一种语言&#xff0c;HTML不是一种编程语言&#xff0c;而是一种标记语言。 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> HTML 标签通常是成对出现的&#xff0c;比如 <b> 和 </b> 标签对中的…
阅读更多...
ROS 2基础概念#3：主题（Topic）| ROS 2学习笔记

ROS 2基础概念#3：主题（Topic）| ROS 2学习笔记

在ROS&#xff08;Robot Operating System&#xff09;中&#xff0c;主题&#xff08;Topics&#xff09;是实现节点之间通信的主要机制之一。节点&#xff08;Node&#xff09;可以发布&#xff08;publish&#xff09;消息到话题&#xff0c;或者订阅&#xff08;subscribe&…
阅读更多...
市场复盘总结 20240304

市场复盘总结 20240304

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 20% 最常用的…
阅读更多...
格两例12345

格两例12345

osu/Lucky Roll gaming 周末osu有道题&#xff1a;lcg已知低位 def lcg(s, a, b, p):return (a * s b) % pp getPrime(floor(72.7)) a randrange(0, p) b randrange(0, p) seed randrange(0, p) print(f"{p }") print(f"{a }") print(f"{b …
阅读更多...
幂等性设计

幂等性设计

目录 前言 幂等性设计 幂等性设计处理流程 HTTP 幂等性 消息队列幂等性 基于kafka 前言 幂等性设计&#xff0c;就是说&#xff0c;一次和多次请求某一个资源应该具有同样的副作用。为什么我们要有幂等性操作&#xff1f;说白了&#xff0c;就两点&#xff1a;1、网络的…
阅读更多...
LeetCode第125场双周赛个人题解

LeetCode第125场双周赛个人题解

目录 100231. 超过阈值的最少操作数 I 原题链接 思路分析 AC代码 100232. 超过阈值的最少操作数 II 原题链接 思路分析 AC代码 100226. 在带权树网络中统计可连接服务器对数目 原题链接 思路分析 AC代码 100210. 最大节点价值之和 原题链接 思路分析 AC代码 10023…
阅读更多...
大话C++之：对象内存模型

大话C++之：对象内存模型

一般继承(无虚函数覆盖) 只有一个虚指针&#xff0c;指向一个虚表&#xff0c;虚函数按顺序从祖先节点开始插入到虚表上。字段按顺序从祖先节点开始插入到对象内存上 一般继承(有虚函数覆盖) 只有一个虚指针&#xff0c;指向一个虚表&#xff0c;虚函数按顺序从祖先节点开始&a…
阅读更多...
桂院校园导航 静态项目 二次开发教程 2.0

桂院校园导航 静态项目 二次开发教程 2.0

Gitee代码仓库&#xff1a;桂院校园导航小程序 GitHub代码仓库&#xff1a;GLU-Campus-Guide 静态项目 2.0版本 升级日志 序号 板块 详情 1 首页 重做了首页&#xff0c;界面更加高效和美观 2 校园页 新增了 “校园指南” 功能&#xff0c;可以搜索和浏览校园生活指南…
阅读更多...
【金三银四】每日一点面试题（Java--JVM篇）

【金三银四】每日一点面试题（Java--JVM篇）

1、说一下 JVM 的主要组成部分及其作用&#xff1f; JVM&#xff08;Java虚拟机&#xff09;是Java程序运行的核心组件&#xff0c;它负责将Java字节码翻译成底层操作系统能够执行的指令。JVM由以下几个主要组成部分构成&#xff1a; 类加载器&#xff08;Class Loader&#…
阅读更多...
spring boot概述

spring boot概述

SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。 该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 通过这种方式&#xff0c;SpringBoot致力于在蓬勃发展的快速应用开发…
阅读更多...
实时抓取SKU商品属性详细信息API数据接口（淘宝，某音）

实时抓取SKU商品属性详细信息API数据接口（淘宝，某音）

item_sku-获取sku详细信息 taobao.item_sku详细信息 API公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_sku 名称类型必须描述keyString是调用key&#xff08;演示示例&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地…
阅读更多...
python-分享篇-生成仿微信公众号推广的个性二维码（支持动态）

python-分享篇-生成仿微信公众号推广的个性二维码（支持动态）

代码 生成仿微信公众号推广的个性二维码&#xff08;支持动态&#xff09;from MyQR import myqr # 要生成动态二维码&#xff0c;只需要将piture参数和save_name参数设置gif动图即可 myqr.run(wordshttps://blog.csdn.net/stqer/article/details/135553200, # 指定二维码包含…
阅读更多...
JVM(内存区域划分)

JVM(内存区域划分)

JVM JVM - Java虚拟机 我们编写的 Java 程序, 是不能够被 OS 直接识别的 JVM 充当翻译官的角色, 负责把我们写的的 Java 程序 ,翻译给 OS “听”, 让 OS 能够识别我们所写的 Java 代码 JVM 内存区域划分 JVM 是一个应用程序, 在启动的时候, 会从 操作系统 申请到一整块很大的内…
阅读更多...
AI-RAN联盟在MWC24上正式启动

AI-RAN联盟在MWC24上正式启动

AI-RAN联盟在MWC24上正式启动。它的logo是这个样的&#xff1a; 2月26日&#xff0c;AI-RAN联盟&#xff08;AI-RAN Alliance&#xff09;在2024年世界移动通信大会&#xff08;MWC 2024&#xff09;上成立。创始成员包括亚马逊云科技、Arm、DeepSig、爱立信、微软、诺基亚、美…
阅读更多...
【LeetCode】升级打怪之路 Day 11：栈的应用、单调栈

【LeetCode】升级打怪之路 Day 11：栈的应用、单调栈

今日题目&#xff1a; Problem 1: 栈的应用 155. 最小栈 | LeetCode20. 有效的括号 | LeetCode150. 逆波兰表达式求值 | LeetCode Problem 2: 单调栈 496. 下一个更大元素 I739. 每日温度503. 下一个更大元素 II 目录 Problem 1&#xff1a;栈 - “先进后出”的应用LC 155. 最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023