CODEWITHSUNDEEP
javascriptthree.js
Hasnain Shamim
Hasnain Shamim

Reputation: 1

I cannot get a basic sphere to render

I've been following this tutorial: https://www.youtube.com/watch?v=6oFvqLfRnsU in order to render basic shapes in three.js. At 18:20 he gets a sphere to show up in his scene.


  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
    camera.position.z = 5;
  var renderer = new THREE.WebGLRenderer({antialias: true});

  renderer.setClearColor("#e5e5e5");
  renderer.setSize(window.innerWidth, window.innerHeight);

  window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  })

  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.SphereGeometry(1,10,10);
  var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
  var mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);

  renderer.render(scene, camera);

My scene seems to be rendering since I have the light gray background but I can't get the black sphere to show up

Upvotes: 0

Views: 46

Answers (1)

prisoner849
prisoner849

Reputation: 17576

There was a typo in your code: var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);

window.innerHieght must be window.innerHeight

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
})



var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var geometry = new THREE.SphereGeometry(1, 10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0xFFCC00
});
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer.render(scene, camera);
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

Upvotes: 1

Related Questions