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