3. On The Plane

Overview

In this exercise, set up a plane geometry and add different objects on top. Add the cone, box and sphere geometry as the plane’s children, then continuously rotate the plane about its z-axis.

On The Plane Codepen: https://codepen.io/xrclub/full/jOZWJGz

Getting Started: https://codepen.io/xrclub/full/eYVJGBE

On The Plane

The scene, camera, lighting, and renderer need to be set up beforehand, as in the Getting Started exercise. If you need help remembering how it all works, check that exercise out before starting. Here, we will just focus on creating the on the plane 3D scene.

Here are the instructions:

1. load 2D texture image
2. create a grid
3. create sphere, cube, and cone
4. add shapes to the grid
5. update animation logic

Step 1: load 2D texture image

Start by loading the 2D grid texture using the loader provided by THREE.js. Set the texture properties of the wrapping modes for wrapS and wrapT to repeat wrapping. Finally, scale the texture so that it repeats twice in both the ‘S’ and ‘T’ directions.

// Load 2D texture image for the plane
const gridtexture = new THREE.TextureLoader().load( "https://res.cloudinary.com/vjy/image/upload/c_fit,h_ih,w_ih/kdsaeye4m3eajlq5m0x4" );

// Set texture properties
gridtexture.wrapS = THREE.RepeatWrapping;
gridtexture.wrapT = THREE.RepeatWrapping;
gridtexture.repeat.set( 2, 2 );

Step 2: create a grid

Create the shape of a plane with a width and a height. Next, assign a standard material for the grid and use the previously loaded grid texture as the mapping. Next, create a grid by combining the geometry and material. To make sure this grid is visible from both sides, set side to THREE.DoubleSide. Rotate the grid along its X-axis by PI / 2 to place it horizontally, then add it to the scene.

// Set up plane geometry and map the grid texture to the material
const planeGeom = new THREE.PlaneGeometry( 100, 80);
const planeMaterial = new THREE.MeshStandardMaterial( {
     map: gridtexture
} );
// Create a grid
this.grid = new THREE.Mesh( planeGeom, planeMaterial );
this.grid.material.side = THREE.DoubleSide;
this.grid.rotation.x = -Math.PI / 2;
this.scene.add(this.grid); 

Step 3: create sphere, cube, and cone

To make the scene more interesting, display different 3D shapes onto the grid; add a sphere, a cube, and a cone. Each of these shapes is defined by its own geometry and material. Set the colour of each shape and its position but make sure to rotate the cone mesh by PI/2 so that it is standing upright on the grid.

// Set up sphere geometry and material 
const sphereGeom = new THREE.SphereGeometry( 10, 20, 16);
const sphereMaterial = new THREE.MeshStandardMaterial( {
     color: 0x0000ff
  } );
// Create a sphere mesh
this.sphereMesh = new THREE.Mesh( sphereGeom, sphereMaterial );
this.sphereMesh.position.set(-12, -10, 10);

// Set up cube geometry and material 
const cubeGeom = new THREE.BoxGeometry( 15, 15, 15);
const cubeMaterial = new THREE.MeshStandardMaterial( {
     color: 0x00ffff
  } );
// Create a cube mesh
this.cubeMesh = new THREE.Mesh( cubeGeom, cubeMaterial );
this.cubeMesh.position.set(8, 10, 8);
    
// Set up cone geometry and material 
const coneGeom = new THREE.ConeGeometry( 15, 30, 15);
const coneMaterial = new THREE.MeshStandardMaterial( {
     color: 0xffff00
} );
// Create a cone mesh
this.coneMesh = new THREE.Mesh( coneGeom, coneMaterial );
this.coneMesh.position.set(30, -20, 16);
this.coneMesh.rotation.x = Math.PI/ 2;

Step 4: add shapes to the grid

Each shape will be added to the grid, making it the parent object for all of the shapes. This means that when the plane moves or rotates, so do the shapes on the grid.

// Make grid the parent of all shape objects
this.grid.add( this.sphereMesh, this.cubeMesh, this.coneMesh );

Step 5: update animation logic

In the update method, rotate the grid on its z-axis by dt. This rotation happens every frame, giving the illusion of continuous rotation

update(dt){
  // Update grid rotation every frame, rotate on its z axis
  this.grid.rotation.z += dt;
  // Render the scene to the screen ( draw it to the screen )
  this.renderer.render(this.scene, this.camera);
}

Result

See the Pen Scene Graph – On The Plane by XR Club (@xrclub) on CodePen.