AI Dojo - Introduction to 3D Simulations in WebSim

1. Introduction to 3D in WebSim

Welcome to the exciting world of 3D simulations in WebSim! In this tutorial, we'll explore how to create immersive 3D environments using WebSim's powerful 3D rendering engine. We'll cover basic 3D concepts, setting up a 3D scene, and creating interactive 3D objects.

Note: This tutorial assumes you're familiar with basic WebSim concepts. If you're new to WebSim, please check our WebSim Basics tutorial first.

2. Setting Up Your 3D Environment

Let's start by setting up a basic 3D environment in WebSim:


import { WebSim3D, Scene, PerspectiveCamera, AmbientLight } from 'websim-3d';

// Initialize WebSim3D
const sim = new WebSim3D('3d-container');

// Create a scene
const scene = new Scene();

// Set up the camera
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Add lighting
const light = new AmbientLight(0xffffff, 0.5);
scene.add(light);

// Add the scene and camera to the simulation
sim.setScene(scene);
sim.setCamera(camera);

// Start the simulation
sim.start();

This code sets up a basic 3D scene with a camera and ambient lighting. The camera is positioned 5 units away from the center of the scene along the z-axis.

3. Creating 3D Objects

Now, let's add some 3D objects to our scene:


import { BoxGeometry, MeshBasicMaterial, Mesh } from 'websim-3d';

// Create a cube
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const cube = new Mesh(geometry, material);

// Add the cube to the scene
scene.add(cube);

// Animate the cube
sim.onUpdate(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
});

This code creates a green cube and adds it to our scene. The onUpdate function rotates the cube continuously, creating a simple animation.

[An animated GIF showing a rotating green cube would be here]

4. Adding Interactivity

Let's make our 3D simulation interactive by allowing users to click on the cube:


import { Raycaster, Vector2 } from 'websim-3d';

const raycaster = new Raycaster();
const mouse = new Vector2();

sim.onClick((event) => {
  // Calculate mouse position in normalized device coordinates
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

  // Update the picking ray with the camera and mouse position
  raycaster.setFromCamera(mouse, camera);

  // Calculate objects intersecting the picking ray
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // Change the color of the first intersected object
    intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
  }
});

This code uses raycasting to detect when the user clicks on the cube. When clicked, the cube changes to a random color.

5. Advanced 3D Concepts

As you become more comfortable with 3D in WebSim, you can explore more advanced concepts such as:

Complex 3D models and textures
Physics simulations in 3D space
Particle systems for effects like fire or smoke
Virtual Reality (VR) integration

Tip: Check out our Advanced 3D in WebSim tutorial for more on these topics.

Conclusion

Congratulations! You've taken your first steps into the world of 3D simulations with WebSim. You've learned how to set up a 3D environment, create and animate 3D objects, and add basic interactivity.

Challenge: Try creating a simple solar system simulation with multiple planets orbiting a central sun. Use different geometries for each planet and add textures to make them look realistic. Share your creation in the WebSim 3D Showcase forum!

Next Steps

To further enhance your 3D WebSim skills, consider exploring:

Happy 3D simulating!