Mecanismo de física Three.js Cannon.js

1. Instalar

cnpm install cannon --save

2. importar

 import * as CANNON from "cannon";

3. Use Three.js para construir cenas físicas (ThingOrigin.js usado aqui pode ser escrito diretamente em three.js)

let mainScene = ThingOrigin.addScene("ttt", document.getElementById("d1"));

let modelB = ThingOrigin.model.initSphere("wb");
 modelB.position.set(0, 20, 0);
 mainScene.add(modelB);

4. Construindo um Mundo da Física com Cannon.js

world = new CANNON.World();
world.gravity.set(0, -10, 0); //设置重力
world.broadphase = new CANNON.NaiveBroadphase(); //碰撞必要
world.solver.iterations = 10; //迭代次数

//创建地面
 var groundShape = new CANNON.Plane();
var groundBody = new CANNON.Body({
    
     mass: 0 });
groundBody.addShape(groundShape);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.addBody(groundBody);

//创建球体
shape = new CANNON.Sphere(10);
mass = 1;
body = new CANNON.Body({
    
    mass: 1});
body.addShape(shape);
body.position.set(0, 30, 0);
body.angularVelocity.set(2, 5, 2); //角速度
body.angularDamping = 0.6; //角度阻尼
world.addBody(body);

5. Deixe os objetos em Three.js copiarem a posição e a rotação do mundo Cannon.js

function animate() {
    
    
    requestAnimationFrame(animate);
    modelB.position.copy(body.position);
	modelB.quaternion.copy(body.quaternion);
}