troubleshooting Question

Cannot get objects to appear in scene in JavaScript

Avatar of V Nadeau
V Nadeau asked on
JavaScript
5 Comments3 Solutions94 ViewsLast Modified:
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>
SOLUTION
Join our community to see this answer!
Unlock 3 Answers and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros