I have Problem in making solid ground in cannonjs

Questions
1

hello everyone, I have a problem with making a solid ground that will make my sphere stop from falling through…

it doesn’t work when I make the mass of the plane 0 like this

const planeBody = new CANNON.Body({mass: 0})

it doesn’t have an effect at all, it should stop the sphere from falling through…

also, there is another problem… when you put the value mass like this:

const planeBody = new CANNON.Body({mass: 1})

it does work and the plane fall along with the sphere if you made the mass of the sphere 1
but if you put the value of mass in this way:

const planeBody = new CANNON.Body()
planeBody.mass = 1;

it won’t move

here is my complete code

 import * as THREE from './threeJS/three.module.js';
import { OrbitControls } from './examples/jsm/controls/OrbitControls.js';
import { GUI } from '../dat.gui/files/dat.gui.module.js';
import * as THREEx from './threeX/threeX.keyboardState.js';

// gui
// const gui = new GUI();

// keyboard
const keyboard = new THREEx.default();

// console.log(THREEx.default);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x777777);

// Meshes
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(40, 40),
  new THREE.MeshStandardMaterial({ color: 0xdddddd, side: THREE.DoubleSide })
);

plane.rotateX(90 / 57.3);

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(3, 64, 32),
  new THREE.MeshStandardMaterial({ color: 'red' })
);

sphere.position.y = 5;

let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;

// prettier-ignore
const camera = new THREE.PerspectiveCamera(45, clientWidth / clientHeight, 0.1, 1000);

const canvas = document.querySelector('.webgl');

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

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

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});

renderer.setSize(clientWidth, clientHeight);
renderer.shadowMap.enabled = true;

// lights

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 7, 5);
directionalLight.target = sphere;
directionalLight.target.updateMatrixWorld();
directionalLight.castShadow = true;

// shadows
// ! only three types of light that support shadows
// ! spotlight
// ! directional light
// ! point light
// ! castShadow means will it create a shadow? receiveShadow means will the shadow be on it?
sphere.castShadow = true;
plane.receiveShadow = true;

// Helpers
const AxesHelper = new THREE.AxesHelper(5);

scene.add(AxesHelper, camera, sphere, plane, directionalLight, ambientLight);

// Clock
const clock = new THREE.Clock();
let oldElapsedTime = 0;

// physics
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

// Sphere
const sphereShape = new CANNON.Sphere(3);
const sphereBody = new CANNON.Body({
  mass: 1,
  position: new CANNON.Vec3(0, 5, 0),
  shape: sphereShape,
});

world.addBody(sphereBody);

// infinite Plane
const planeShape = new CANNON.Plane();
const planeBody = new CANNON.Body({
  mass: 0,
});

planeBody.addShape(planeShape);
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI * 0.5);
world.addBody(planeBody);

function animate() {
  requestAnimationFrame(animate);

  let ElapsedTime = clock.getElapsedTime();
  let deltaTime = ElapsedTime - oldElapsedTime;
  oldElapsedTime = deltaTime;

  // to update the world 60 times per second
  world.step(1 / 60, deltaTime, 3);

  directionalLight.position.z = 3 * Math.sin(ElapsedTime);
  directionalLight.position.x = 3 * Math.cos(ElapsedTime);
  directionalLight.lookAt(sphere.position);

  sphere.position.copy(sphereBody.position);
  plane.position.copy(planeBody.position);

  // sphere.position.x = keyboard.pressed('right')
  //   ? sphere.position.x + 0.1
  //   : keyboard.pressed('left')
  //   ? sphere.position.x - 0.1
  //   : sphere.position.x;

  // sphere.position.z = keyboard.pressed('up')
  //   ? sphere.position.z - 0.1
  //   : keyboard.pressed('down')
  //   ? sphere.position.z + 0.1
  //   : sphere.position.z;

  controls.update();
  renderer.render(scene, camera);
}

animate();

//events

window.addEventListener('resize', () => {
  clientWidth = document.documentElement.clientWidth;
  clientHeight = document.documentElement.clientHeight;
  camera.aspect = clientWidth / clientHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(clientWidth, clientHeight);
});

window.addEventListener('dblclick', () => {
  if (!document.fullscreenElement) {
    canvas.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});
2

I solved it!!! I was using an unmaintained version of cannon js, I download it from this GitHub account github.com/schteppe/cannon.js, I remembered that it’s not maintained anymore and I told myself maybe this the problem and surly it is!!! man, I spent 8 hours solving this problem ahh finally, I checked my code one million times OMG, I downloaded the maintained version from this Github account github.com/pmndrs/cannon-es and once I changed the import without even touching the code I checked the browser, and boom the sphere doesn’t fall through the plane😍

1 Like
3

there are tons of bugfixes we’ve made to it. but the discoverability is a bummer, not sure what to do in order to make people move towards cannon-es or even to help finding it.