Function App

16-physics-part-02/src/App.jsx:9–267

()

import SceneInit from './lib/SceneInit';

function App() {
  useEffect(() => {
    // ============
    // part 0
    // set up Three.js scene with axis helper
    // ============
    const test = new SceneInit('myThreeJsCanvas');
    test.initialize();
    test.animate();
    const axesHelper = new THREE.AxesHelper(8);
    test.scene.add(axesHelper);

    // ============
    // part 1
    // set up world physics with gravity
    // ============
    const physicsWorld = new CANNON.World({
      gravity: new CANNON.Vec3(0, -9.82, 0),
    });

    // create a ground body with a static plane
    const groundBody = new CANNON.Body({
      type: CANNON.Body.STATIC,
      // infinte geometric plane
      shape: new CANNON.Plane(),
    });
    // rotate ground body by 90 degrees
    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
    // groundBody.quaternion.setFromEuler(-Math.PI / 2, Math.PI / 24, 0);
    physicsWorld.addBody(groundBody);

    // add a green wireframe to each object and visualize the physics world
    const cannonDebugger = new CannonDebugger(test.scene, physicsWorld);

    // const animate = () => {
    //   physicsWorld.fixedStep();
    //   cannonDebugger.update();
    //   window.requestAnimationFrame(animate);
    // };
    // animate();

    // ============
    // part 2
    // add base vehicle body
    // reference: https://github.com/pmndrs/cannon-es/blob/master/examples/rigid_vehicle.html
    // ============
    const carBody = new CANNON.Body({
      mass: 5,
      position: new CANNON.Vec3(0, 6, 0),
      shape: new CANNON.Box(new CANNON.Vec3(4, 0.5, 2)),
    });

    const vehicle = new CANNON.RigidVehicle({
      chassisBody: carBody,
    });

    // vehicle.addToWorld(physicsWorld);