Cannot get objects to appear in scene in JavaScript

H. I am following a book that is supposed to show me how to create a solar system in JavaScript. The problem is that none of my objects appear on the screen, no sun, earth or mars. Can anyone please tell me what is wrong with this code or what I am missing?

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 camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 1e6);
  camera.position.z = -1000;
  scene.add(camera);

  // 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(500,28,21);
var surface = new THREE.MeshPhongMaterial({ambient: 0xFFD700, color: 0x0000cd});
var sun = new THREE.Mesh(star,surface);
scene.add(sun);

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

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

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

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.puch(new THREE.Vector3(
    1e5 * Math.cos(lon) * Math.cos(lat),
    1e5 * Math.sin(lon) * Math.cos(lat),
    1e5 * Math.sin(lat)
    ));
}

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);
 
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
}

animate;
 
</script>
V NadeauAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Flabio GatesCommented:
have you tried replacing the last line
animate;

Open in new window

with
animate();

Open in new window

0
V NadeauAuthor Commented:
Thanks for catching that. It was an error but fixing it still does not make the objects appear.
0
Leonidas DosasCommented:
You have a syntax error at this:
stars.vertices.puch(new THREE.Vector3(

Open in new window

The correct is this:
stars.vertices.push(new THREE.Vector3(

Open in new window

1
V NadeauAuthor Commented:
Thank you for your feedback. There was actually alot missing from my code which I fixed. Now the sun, earth and mars will display, and earth and mars rotates around the sun. The problem remaining  is that the stars do not appear and the keydown events do nothing. I think I will start a new question for this with the revised code, otherwise it just looks confusing. Here is what I have so far:

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>

</script>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
V NadeauAuthor Commented:
I realized that there was information in the book that I had not typed in. Adding this extra code solved a big part of my problem.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.