asked on

Stars do not appear and keydown event does nothing, in JavaScript.

Hi. I am trying to create a solar system. The sun, earth and mars displays fine and the earth and mars rotates around the sun. My problem is that the stars do not appear and the keydown event does not work. Any help would be very much appreciated. Thanks.

Code:
***********************************************************************

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>

  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var above_cam = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 1e6);
  above_cam.position.z = 1000;
  scene.add(above_cam);

  var earth_cam = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 1e6);
  scene.add(earth_cam);
  
  var camera = above_cam;
  
  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
document.body.style.backgroundColor = 'black';

var star = new THREE.SphereGeometry(50,28,21);
var surface = new THREE.MeshPhongMaterial({ambient: 0xFFD700, color: 0x0000cd});
var sun = new THREE.Mesh(star, surface);
scene.add(sun);

var planet = new THREE.SphereGeometry(20,20,15);
var surface = new THREE.MeshPhongMaterial({ambient: 0x1a1a1a, color: 0xFFD700});
var earth = new THREE.Mesh(planet, surface);
earth.position.set(250,0,0);
scene.add(earth);

var planet2 = new THREE.SphereGeometry(20,20,15);
var surface = new THREE.MeshPhongMaterial({ambient: 0x1a1a1a, color: 0xb22222});
var mars = new THREE.Mesh(planet2, surface);
mars.position.set(500,0,0);
scene.add(mars);

var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
var sunlight = new THREE.PointLight(0xffffff,5,1000);
sun.add(sunlight);

var stars = new THREE.Geometry();
while (stars.vertices.length < 1e4) {
  var lat = Math.PI * Math.random() - Math.PI/2;
  var lon = 2*Math.PI * Math.random();
  
  stars.vertices.push(new THREE.Vector3(
    1e5 * Math.cos(lon) * Math.cos(lat),
    1e5 * Math.sin(lon) * Math.cos(lat),
    1e5 * Math.sin(lat)
    ));
}

var star_stuff = new THREE.ParticleBasicMaterial({size: 500});
var star_system = new THREE.ParticleBasicMaterial(stars, star_stuff);
scene.add(star_system);


clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  
  var time = clock.getElapsedTime();
  
  var e_angle = time * 0.8;
  earth.position.set(250* Math.cos(e_angle), 250* Math.sin(e_angle), 0);
  
  var m_angle = time * 0.3;
  mars.position.set(500* Math.cos(m_angle), 500* Math.sin(m_angle), 0);
  
  var y_diff = mars.position.y - earth.position.y,
    x_diff = mars.position.x - earth.position.x,
    angle = Math.atan2(x_diff, y_diff);
    
  earth_cam.rotation.set(Math.PI/2, -angle, 0);
  earth_cam.position.set(earth.position.x, earth.position.y, 22);
  
    // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
}

animate();


document.addEventListener("keydown", function(event) {
  var code = event.keycode;
  
  if (code == 65) {     //A
    camera = above_cam;
  }
   if (code == 69) {     //E
    camera = earth_cam;
  }
});

</script>

Open in new window

Julian Hansen

Usually a problem like this takes almost a week to solve but we will try and do it in less time.

Firstly, the keydown is not working because of the age old programmers nemisis - the spelling error.

keycode should be keyCode (JavaScript is sensitive to case)

As to why the stars are not showing I am afraid I cannot say. Are you sure they are being placed in the scene within the cameras viewing angle?

V Nadeau

ASKER

Thank you! The keyCode worked and I can switch between camera views. Sometimes you can stare at the code for a long time and not see something as silly as that :) Unfortunately, I am left with the dilemma to move on with my studies and forget the stars or hope someone can figure it out ... I am a beginner and at a loss here. But as most programmers can understand, it will play on my mind until I figure it out!

Julian Hansen

Sometimes you can stare at the code for a long time and not see something as silly as that

That is one of the reasons we here - because the "its right in front of you but you don't see it" is so common in this profession.

I am sorry I cannot assist with the stars - it would take a bit of time to get into your code and the framework you are using. I would imagine that it has to do with the stars being rendered outside of the visible scene - but that is a guess.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.