Físicas (Colisiones, Gravedad, ...) con Three.js y Ammo.js

Tutorial | Three.js

Código principal

import { AmmoPhysics } from 'three/addons/physics/AmmoPhysics.js';

...

let physics = await AmmoPhysics();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(viewWidth, viewHeight);

...

const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const boxMesh = new THREE.Mesh(boxGeo, boxMat);
scene.add(boxMesh);
boxMesh.position.set(1,5,0)
physics.addMesh( boxMesh,1);

Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
</head>
<body>
    <h1>App</h1>

    <div style="display: flex; justify-content: center;">
        <div id="game"></div>
    </div>

<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three@0.151.3/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.151.3/examples/jsm/"
    }
}
</script>

<script src="https://bites.link/files/tutorial/three-js/ammo.wasm.js"></script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { AmmoPhysics } from 'three/addons/physics/AmmoPhysics.js';
import Stats from 'three/addons/libs/stats.module.js';

// size del la ventana de visualizacion
const viewWidth = 360;
const viewHeight = 360;

let physics = await AmmoPhysics();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(viewWidth, viewHeight);

// agregar en el div
let game_div = document.getElementById("game");
game_div.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    45,
    viewWidth/viewHeight,
    0.1,
    1000
);

const orbit = new OrbitControls(camera, renderer.domElement);

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

const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const boxMesh = new THREE.Mesh(boxGeo, boxMat);
scene.add(boxMesh);
boxMesh.position.set(1,5,0)
physics.addMesh( boxMesh,1);

const sphereGeo = new THREE.SphereGeometry(2);
const sphereMat = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true,
});
const sphereMesh = new THREE.Mesh( sphereGeo, sphereMat);
scene.add(sphereMesh);
physics.addMesh( sphereMesh,1);

const groundGeo = new THREE.BoxGeometry(20,5,20);
const groundMat = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    wireframe: true
});
const groundMesh = new THREE.Mesh(groundGeo, groundMat);
scene.add(groundMesh);
groundMesh.position.y = -5.5
physics.addMesh( groundMesh);

function animate() {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
}

animate()

</script>

</body>
</html>

Referencias

Tutorial | Three.js