Webgl Bogie! - An Interactive 3D Expo with Three.js

This blog post is a comprehensive guide to creating an interactive 3D expo using Three.js. We will explore the code behind the expo and provide sample codes to help you get started.

Introduction

Three.js is a popular JavaScript library used for creating and rendering 3D graphics in the browser. It provides a powerful API for creating complex 3D scenes, animations, and interactions. In this blog post, we will use Three.js to create an interactive 3D expo.

Setting up the Scene

To start, we need to set up the scene. This includes creating the canvas, setting up the camera, and adding lights to the scene.

// Create the canvas
const canvas = document.getElementById('myCanvas');

// Create the scene
const scene = new THREE.Scene();

// Create the camera
const camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000);

// Add lights to the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

Creating the Expo

Next, we need to create the expo. This includes creating the 3D models, adding textures, and setting up the animations.

// Load the 3D model
const loader = new THREE.GLTFLoader();
loader.load('models/bogie.gltf', (gltf) => {
  const bogie = gltf.scene;
  scene.add(bogie);
});

// Add textures to the model
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/bogie_texture.jpg');
bogie.traverse((child) => {
  if (child.isMesh) {
    child.material.map = texture;
  }
});

// Set up the animations
const animation = new THREE.Animation(bogie, 'bogie_animation');
animation.play();

Adding Interactivity

To make the expo interactive, we need to add event listeners to the canvas. This includes handling mouse events, keyboard events, and touch events.

// Add event listeners to the canvas
canvas.addEventListener('mousemove', (event) => {
  // Handle mouse move event
});

canvas.addEventListener('click', (event) => {
  // Handle click event
});

canvas.addEventListener('touchstart', (event) => {
  // Handle touch start event
});

Displaying Information

To display information about the bogie, we need to create a UI element and add it to the scene.

// Create a UI element
const infoElement = document.createElement('div');
infoElement.className = 'info';
infoElement.innerHTML = 'Bogie Information';

// Add the UI element to the scene
scene.add(infoElement);

Resetting the Bogie Position

To reset the bogie position, we need to create a function that resets the bogie’s position and rotation.

// Create a function to reset the bogie position
function resetBogiePosition() {
  bogie.position.set(0, 0, 0);
  bogie.rotation.set(0, 0, 0);
}

Conclusion

In this blog post, we have created an interactive 3D expo using Three.js. We have covered setting up the scene, creating the expo, adding interactivity, displaying information, and resetting the bogie position. With this knowledge, you can create your own interactive 3D expos using Three.js.

Sample Code

Here is the complete sample code for the interactive 3D expo:

// Create the canvas
const canvas = document.getElementById('myCanvas');

// Create the scene
const scene = new THREE.Scene();

// Create the camera
const camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000);

// Add lights to the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

// Load the 3D model
const loader = new THREE.GLTFLoader();
loader.load('models/bogie.gltf', (gltf) => {
  const bogie = gltf.scene;
  scene.add(bogie);
});

// Add textures to the model
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/bogie_texture.jpg');
bogie.traverse((child) => {
  if (child.isMesh) {
    child.material.map = texture;
  }
});

// Set up the animations
const animation = new THREE.Animation(bogie, 'bogie_animation');
animation.play();

// Add event listeners to the canvas
canvas.addEventListener('mousemove', (event) => {
  // Handle mouse move event
});

canvas.addEventListener('click', (event) => {
  // Handle click event
});

canvas.addEventListener('touchstart', (event) => {
  // Handle touch start event
});

// Create a UI element
const infoElement = document.createElement('div');
infoElement.className = 'info';
infoElement.innerHTML = 'Bogie Information';

// Add the UI element to the scene
scene.add(infoElement);

// Create a function to reset the bogie position
function resetBogiePosition() {
  bogie.position.set(0, 0, 0);
  bogie.rotation.set(0, 0, 0);
}