Need help working with cannon.js

Im having trouble working with cannon.js
I have been able to import libraries and use them correctly up until now
I have been trying to implement cannon.js with three.js but it does work correctly. as far as a i can tell i’m not getting any errors in the console but please do check yourself because i don’t have access to the console. I assume its something to do with importing but like i said i’m not getting any error on that within replits built in console. I don’t think there is anything wrong with the code it self other wise i would be getting errors about that but i don’t know for sure.

Does anyone have some sort of experience with cannon.js and three.js or somthing to do with cannon.js?


https://replit.com/@OwenStritz/3js?v=1

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);
})
1 Like