2. Spinning Sphere

Overview

For this exercise, let’s add a sphere to the scene and map a grid texture onto the object. Animate the sphere by rotating along its x and y axis.

Spinning Sphere Codepen: https://codepen.io/xrclub/full/eYVJGBE

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

Spinning Sphere

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 spinning sphere 3D scene.

Here are the instructions:

1. load 2D texture image
2. set up sphere geometry and material
3. create a sphere mesh
4. update animation logic

Step 1: load 2D texture image

Use the texture loader from the THREE.js library to load an image from the selected URL. The image will be used as the texture (visual surface) for the sphere. Configure the texture to repeat across the sphere’s surface. Set the wrapping modes for wrapS and wrapT to repeat wrapping. Lastly, scale the texture so that it repeats twice in both the ‘S’ and ‘T’ directions.

// Load 2D texture image
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: set up sphere geometry and material

Create a new geometry and textured material for the sphere. The numbers within the sphere geometry specify the radius, width segments, and height segments, respectively. To map a texture, use the previously loaded grid texture and assign it as the texture of the standard material.

// Set up sphere geometry and map texture to the sphere material
const sphereGeometry = new THREE.SphereGeometry( 30, 32, 16 );
const sphereMaterial = new THREE.MeshStandardMaterial( {
        map: gridTexture
} );

Step 3: create a sphere mesh

A mesh is a combination of geometry (the shape of the object) and material (the appearance of the object). Create a new sphere mesh that uses the sphere geometry and material defined earlier. Adding the sphere to the scene makes it visible when the scene is rendered.

// Create a sphere mesh
this.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
this.scene.add( this.sphere );

Step 4: update animation logic

Update the rotation of the sphere on each frame. The dt variable (typically represents “delta time”) is the elapsed time since the last frame was drawn. Rotate the sphere by multiplying dt with a speed constant along its y & x axes so that the rotation speed of the sphere remains consistent. This ensures the animation is smooth, even if the frame rate changes.

update(dt) {
  // Update rotation every frame. Sphere should rotate on its x and y axis
  this.sphere.rotation.y += dt * 1;
  this.sphere.rotation.x += dt * 0.2;

  // Render the scene to the screen ( draw it to the screen )
  this.renderer.render(this.scene, this.camera);
}

Result

See the Pen Spinning Sphere by XR Club (@xrclub) on CodePen.