I have Problem in making solid ground in cannonjs - cannon.js

Question

I have faced a problem while making solid ground that will make my sphere stop from falling through the plane…
the code below should prevent the sphere from falling through the plane, and also I know that you need to rotate the solid body...
const planeBody = new CANNON.Body({mass: 0})
but surprisingly it doesn’t have any effect at all, what should happen is that it should stop the sphere from falling through the plane…
also, there is another weird problem
the code below should make the plane fall along with the sphere if the sphere also has a mass equal to 1, and indeed that is what happens here
const planeBody = new CANNON.Body({mass: 1})
but when you try to rewrite it in this form, it stops from working
const planeBody = new CANNON.Body()
planeBody.mass = 1;
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();
}
});