在 Three.js 中使用 cannon.js 创建物理

Question

我一直在研究 Three.js 和 cannon.js 我一直在努力处理 cannon.js 部分，基本上应该发生的事情是它创建了通常的情况。 （场景，相机，渲染器）然后它创建一个平面几何体，在动画函数中它复制groundBody的位置和旋转，从我可以告诉碰撞盒和什么有物理。

我遇到的问题是网格不会掉到地上。从我看来，没有错误，但我坚持使用 replit 的内置控制台，因为我的学校阻止了实际的控制台，并且由于某种原因，replit 并不总是给出所有错误，只给出重大的游戏破坏错误。

对于那些不熟悉replit的人，按“<>” 将为那些出于某种原因想要查看我的人显示所有不同文件的代码，例如index.html或css

项目，main.js：

import * as THREE from 'three';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

import * as Cannon from 'https://unpkg.com/cannon/build/cannon.js';

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const orbit = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 20, -30);
orbit.update();

// ------------------------------------------------------------
const groundGeo = new THREE.PlaneGeometry(30, 30);
const groundMat = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  side: THREE.DoubleSide,
  wireframe: true
});
const groundMesh = new THREE.Mesh(groundGeo, groundMat);
scene.add(groundMesh);
// ------------------------------------------------------------

const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.81, 0)
});

const groundBody = new CANNON.Body({
  shape: new CANNON.Plane(),
  mass: 10
});
world.addBody(groundBody);

const timeStep = 1 / 60;

function animate() {
  world.step(timeStep);

  groundMesh.position.copy(groundBody.position);
  groundMesh.quaternion.copy(groundBody.quaternion);
  
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener('resize', function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
})

Answer 1

我也许可以提供帮助，但是你想要什么网格掉落到地面上，而且如果你还没有将地面四元数设置为 -Math.PI / 2。