We help IT Professionals succeed at work.
Get Started

Cannot get objects to appear in scene in JavaScript

V Nadeau
V Nadeau asked
on
93 Views
Last Modified: 2017-11-13
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>
Comment
Watch Question
Commented:
This problem has been solved!
Unlock 3 Answers and 5 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE