Skip to main content

Three.js Physics Integration Tutorial

Integrating physics into your Three.js application enhances realism by allowing objects to interact according to the laws of physics. This tutorial will guide you through the process of integrating a physics engine with Three.js, specifically using cannon.js as an example.

1. Introduction to Physics Integration​

Physics engines simulate the physical properties of objects, such as gravity, collision, and friction. By integrating a physics engine, you can create more dynamic and interactive 3D environments.

Key Concepts​

  • Rigid Bodies: Objects that have mass and can collide with each other.
  • Forces: Influences that change the motion of objects, such as gravity and impulse.
  • Collision Detection: The process of determining if two or more objects collide.

2. Setting Up the Scene​

Step 1: Create a Basic Three.js Scene​

Begin by setting up a simple Three.js scene:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Step 2: Include Cannon.js​

You need to include cannon.js for physics simulation. You can add it via a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>

3. Setting Up the Physics World​

Step 1: Create a Physics World​

Initialize the physics world using Cannon.js:

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Set gravity in the Y direction

Step 2: Create a Ground Plane​

Create a ground plane in the physics world:

const groundMaterial = new CANNON.Material('groundMaterial');
const groundBody = new CANNON.Body({
    mass: 0 // Static body
});
const groundShape = new CANNON.Plane();
groundBody.addShape(groundShape);
world.add(groundBody); // Add ground to the physics world

// Create a visual representation of the ground
const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMesh = new THREE.Mesh(groundGeometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
groundMesh.rotation.x = -Math.PI / 2; // Rotate to horizontal
scene.add(groundMesh); // Add ground to the scene

4. Creating Rigid Bodies​

Step 1: Create a Rigid Body​

Create a dynamic body (like a cube) that will respond to physics:

const boxMaterial = new CANNON.Material('boxMaterial');
const boxBody = new CANNON.Body({
    mass: 1 // Dynamic body
});
boxBody.position.set(0, 5, 0); // Start above the ground
const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)); // Box shape
boxBody.addShape(boxShape);
world.add(boxBody); // Add box to the physics world

// Create a visual representation of the box
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMesh = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
scene.add(boxMesh); // Add box to the scene

5. Updating the Physics World​

Step 1: Animate the Scene​

Create an animation loop that updates both the Three.js scene and the Cannon.js physics world:

function animate() {
    requestAnimationFrame(animate); // Call animate again for the next frame

    world.step(1 / 60); // Step the physics world

    // Update the Three.js mesh positions and rotations from Cannon.js
    boxMesh.position.copy(boxBody.position); // Sync position
    boxMesh.quaternion.copy(boxBody.quaternion); // Sync rotation

    renderer.render(scene, camera); // Render the scene
}

animate(); // Start the animation loop

6. Conclusion​

In this tutorial, you learned how to integrate a physics engine (Cannon.js) with Three.js, creating a basic scene with a ground plane and a dynamic box that responds to physics. This integration allows for more realistic interactions within your 3D environment.

Further Reading​

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.