Problem with planet simulation

Questions
1

Hey everyone,
I am trying to make this code run with three.js but instead of getting the sphere. I get a black screen.
Can someone please advice with whats wrong with the code?
FYI I am new to coding

three.js Emoji 
<style media="screen">
    body { margin: 0; }
    canvas {width: 100%; height: 100%; }''
</style>
var scene = new THREE.Scene(); 
  //Create a new perspective camera
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight/window.innerWidth, 1, 1000);
  camera.position.set(0,0,10);

  //Create the WebGL renderer and set its size to the full dimensions of the screen.
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);

  //Add the renderer canvas to the DOM.
  document.body.appendChild(renderer.domElement);

  //Create a new ambient light
  var light = new THREE.AmbientLight( 0x888888 )
  scene.add( light )

  //Create a new directional light
  var light = new THREE.DirectionalLight( 0xfdfcf0, 1 )
  light.position.set(20,10,20)
  scene.add( light )

  //Create geometry and material
  var earthGeometry = new THREE.SphereGeometry( 20, 50, 50 );
  var earthMaterial = new THREE.MeshPhongMaterial({
    color: 0xaaaaaa
  });

  //Build earth mesh using our geometry and material
  var earth = new THREE.Mesh(earthGeometry, earthMaterial);

  //add the earth mesh to the scene
  scene.add(earth);

  var render = function (actions) {
    renderer.render(scene, camera);
    requestAnimationFrame( render );
    };
    render();

    var earthMaterial = new THREE.MeshPhongMaterial({
      map: new THREE.TextureLoader("../images/1.jpg"),
      color: 0xaaaaaa,
      specular: 0x333333,
      shininess: 25
      });




  </script>


</body>
2

Hi!
Any warnings or error messages in the browser console?

3

No, non
Here is how it looks
45

5

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight/window.innerWidth, 1, 1000);

is that triple division window.innerWidth/window.innerHeight/window.innerWidth intentional?

But the reason, that you see nothing, is that your camera is inside the sphere.
Camera position is [0, 0, 10], whereas the radius of the sphere is 20 (var earthGeometry = new THREE.SphereGeometry( 20, 50, 50 );).
Put your camera further away from the center of the scene (for example, [0, 0, 50]), or reduce sphere’s radius (for example, to 5).

1 Like
6

Thank you so much for your answer.
Yes I have gotten pretty far from that point, but now I am stuck with making the child planet rotate around the central emoji.
Please have a look, I would love to hear your thoughts

// a function to for the scene
function init( ){
  /* Creating a new scene
  variables*/

  var scene = new THREE.Scene( );
  // Showing the performance of scene
  var stats = new Stats();
  var emoji = getEmoji( 10,50,50 );
  var child = getChild( 10,20,20 );
  var pointLight = getPointLight( 0.5 );
  var directionalLight = getDirectionalLight( 0.5 );
  var ambientLight = getAmbientLight ( 1 );
  document.body.appendChild(stats.dom);





  //   // creating a new dat gui variable to interactively control the light intensity inside the program

  var gui = new dat. GUI( );



  // Positioning

  pointLight.position.x = 600;
  pointLight.position.z = 50;
  pointLight. intensity = 0.2;
  pointLight.position.x = 1.5;
  ambientLight. position.x = 100;
  child. position.set ( 45 , 0 , 0 );

  // Materials




  // Add
  gui. add( pointLight, 'intensity', 0,2);
  gui. add( pointLight.position,'y',0,innerWidth );
  gui. add( pointLight.position,'x',0,innerWidth );
  gui. add( pointLight.position,'z',0,innerWidth );



  scene. add ( emoji );
  scene. add ( child ) ;
  scene. add ( pointLight );
  scene. add ( directionalLight );
  scene. add ( ambientLight );


  //Create a new perspective camera
  var camera = new THREE.PerspectiveCamera (
    75,
    window.innerWidth / window.innerHeight,
    0.01,
    1000
  );
  camera. position.z = 60;


  //Create the WebGL renderer and set its size to the full dimensions of the screen.
  var renderer = new THREE.WebGLRenderer( { antialias	: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer. shadowMap.enabled = true;

  //Add the renderer canvas to the DOM.
  document.body.appendChild( renderer.domElement );

  var composer = new THREE.EffectComposer ( renderer );
  var renderPass = new THREE. RenderPass( scene, camera );
  renderPass. renderToScreen = true;
  composer.addPass(renderPass);

  // Activation the orbit control
  var controls = new THREE.OrbitControls( camera, renderer.domElement );

  update (composer, scene, camera, controls, stats);


  return scene;

}

  // End of the init function



  // Main emoji

  function getEmoji ( w , h , d ) {
  var geometry = new THREE.SphereGeometry( w, h, d );
  var material = new THREE.MeshStandardMaterial
(
    {
      color: 'rgb( 20, 20, 20 )',
      specular: 'rgb(255,255,255)',
      shininess: 200,
      // map: loader
  } );
  var sphere = new THREE.Mesh ( geometry,material );
  sphere. castShadow = true;
  return sphere;
  }



  // Child

  function getChild ( w , h , d ) {
    var geometry = new THREE.SphereGeometry( w, h, d );
    // var texture = new THREE.TextureLoader().load ( "/images/4.jpg" );
    var material = new THREE.MeshPhongMaterial
    material. map = THREE. ImageUtils.loadTexture("/images/1.jpg" );
    material. specularMap = THREE.ImageUtils.loadTexture('/images/1-Spec.jpg');
    material. specular = new THREE.Color('grey');

(
      {
        color: 0xffffff,
        specular: 0x050505,
        shininess: 100,
        side: THREE.DoubleSide,
        // map: texture
      } );
      var child = new THREE.Mesh ( geometry, material );

      child. castShadow = true;

      return child;
    }


    // get DirectionalLight

    function getDirectionalLight ( intensity ) {
    var light = new THREE.DirectionalLight( 0xfdfcf0, 0.5 )
    light.castShadow = true;
    light.position.set(50,2,5)
    return light;
    }


      // point light function

      function getPointLight ( intensity ) {
      var light = new THREE.PointLight(0xffffff, intensity );
      light.castShadow = true;
      return light;
      }

      function getAmbientLight ( intensity ) {
      var light = new THREE.AmbientLight( 0x888888, intensity )
      return light;
      }




      // update function to render the scene

      function update(renderer, scene, camera, controls,stats){
        renderer. render(
        scene,
        camera,
      );
      controls. update();

      requestAnimationFrame(function( ){
        update( renderer, scene, camera, controls, stats );
      })


    }



    // calling the init function
    var scene = init( );
7

What revision of Three.js do you use?

8

What do you mean by revision?

9

I mean its revision. The last one is r92.

10

It is the last one

11

Stuff like that is deprecated long ago.

And about your question. Maybe that fiddle will be helpful:

1 Like