Spinning Sphere

Description

In this exercise, we add a Sphere Geometry to the scene with an uploaded texture as it material.

Tutorial

To begin this exercise, the first thing we would need to do is set up our 3D canvas with ThreeJS. This involves setting up our renderer, scene and camera.

  // RENDERER //////////////////////////////////////////////////////
  //Setting up the renderer
  renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  // SCENE ////////////////////////////////////////////////////////
  //Creating an empty scene
  scene = new THREE.Scene();
  
  // CAMERA ///////////////////////////////////////////////////////
  //Creating Camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // Setting Camera positon
  camera.position.set( 0, 0, 10 );
  scene.add(camera);

Once we have set up our scene, before adding any objects, we set up our lights.

  // LIGHTS ////////////////////////////////////////////////////////
  //Ambient lighting added here
  const ambientLight = new THREE.AmbientLightProbe(0xffffff, 1.3);
  scene.add(ambientLight);
  
  //Directional light is added
  const dirLight = new THREE.DirectionalLight( 0x00ffff, 5 );
  dirLight.position.set( 10, 0, 0 );
  scene.add(dirLight);

Now lets build our sphere geometry. We use the SphereGeometry function in ThreeJS to do this. You may view the ThreeJS page for more information on this function.

const geometry = new THREE.SphereGeometry( 1, 32, 16 );

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

Leave a Reply

Your email address will not be published.