Orbiting Planet

Description

In this exercise, we set up a sphere geometry in the center and have another sphere orbit around it. The orbiting sphere is shooting a rocket (Box and Cone Geometry) as it revolves around the center sphere. The center sphere rotates slowly.

Tutorial

After setting up the renderer, scene, camera and lights; the next thing to do would be to add the objects. In this exercise we will show how we can group objects together with Mesh.

We first set up the center sphere.

//Setting up object texture from a 2D image
  const gridtexture = new THREE.TextureLoader().load( "https://res.cloudinary.com/vjy/image/upload/c_fit,h_ih,w_ih/kdsaeye4m3eajlq5m0x4" );
  //Defining how the texture should be fitted to an object
  gridtexture.wrapS = THREE.RepeatWrapping;
  gridtexture.wrapT = THREE.RepeatWrapping;
  gridtexture.repeat.set( 2, 2 );
  
 
  //Creating Object and adding a Material
  ////CENTER PLANET////////////////////////////////////////////////////////////////////
  const centerSphere = new THREE.SphereGeometry( 20, 30, 16);
  const centersphereMaterial = new THREE.MeshStandardMaterial( {
     map: gridtexture
  } );
  centersphereMesh = new THREE.Mesh( centerSphere, centersphereMaterial );
  scene.add( centersphereMesh );

We then set up the next sphere that will be orbiting the center sphere. Let’s call it planet!

///ORBITING PLANET/////////////////////////////////////
  const planet = new THREE.SphereGeometry( 10, 30, 16);
  const planetMaterial = new THREE.MeshStandardMaterial( {
     color: 0x00ff00
  } );
  planetMesh = new THREE.Mesh( planet, planetMaterial );
  planetMesh.position.set(-100, 0, 0);
  scene.add( planetMesh );

Now we want to build a rocket and place it on top of our planet. We will use the BoxGeometry and ConeGeometry for this! We will group both the Box and Cone under one mesh and also add that mesh to the planet Mesh we created earlier.

const block =  new THREE.BoxGeometry( 5, 5, 5);;
  const blockMaterial = new THREE.MeshStandardMaterial( {
     color: 0xff0000
  } );
  blockMesh = new THREE.Mesh( block, blockMaterial );
  blockMesh.position.set(0, 10, 0);
  planetMesh.add( blockMesh );
  //////////////////////////////////////////////////
  
  
  ////ROCKET ROOF/////////////////////////////////////
  const roof = new THREE.ConeGeometry( 5, 5, 4);
  const roofMaterial = new THREE.MeshStandardMaterial( {
     color: 0x00ffff
  } );
  const roofMesh = new THREE.Mesh( roof, roofMaterial );
  roofMesh.position.set(0, 5, 0);
  blockMesh.add( roofMesh )

See the Pen Orbiting Planet by XR Club (@xrclub) on CodePen.

Leave a Reply

Your email address will not be published.