Problem with planet simulation

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>

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

No, non
Here is how it looks
45

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

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( );

What revision of Three.js do you use?

What do you mean by revision?

I mean its revision. The last one is r92.

It is the last one

Stuff like that is deprecated long ago.

And about your question. Maybe that fiddle will be helpful:
https://jsfiddle.net/prisoner849/t3mowjcy/

1 Like