my three.js scene is not rendering. not sure why

my main.js file contains :-

import './style.css';
import * as THREE from 'three';


//create scene
const scene = new THREE.Scene();

//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) 
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth/window.innerHeight,
  0.1,
  1000,
);

const renderer = new THREE.WebGLRenderer({
  //which DOM element to use
  canvas: document.querySelector('.canvas'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);


//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true}); 

//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);

scene.add(globe);

function animate(){
  requestAnimationFrame(animate); //optimized rendering

  //rotation
  globe.rotateOnAxis += 0.01;
  renderer.render( scene, camera );
}
animate();

renderer.render(scene, camera);

JavaScript
​x
 
import './style.css';
import * as THREE from 'three';
​
​
//create scene
const scene = new THREE.Scene();
​
//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) 
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth/window.innerHeight,
  0.1,
  1000,
);
​
const renderer = new THREE.WebGLRenderer({
  //which DOM element to use
  canvas: document.querySelector('.canvas'),
});
​
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);
​
​
//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true}); 
​
//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);
​
scene.add(globe);
​
function animate(){
  requestAnimationFrame(animate); //optimized rendering
​
  //rotation
  globe.rotateOnAxis += 0.01;
  renderer.render( scene, camera );
}
animate();
​
renderer.render(scene, camera);
​

and my index.html :-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gautam</title>
  </head>
  <body>
    <canvas id="globe">This is the canvas
    </canvas>
    <script type="module" src="./main.js"></script>
  </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gautam</title>
  </head>
  <body>
    <canvas id="globe">This is the canvas
    </canvas>
    <script type="module" src="./main.js"></script>
  </body>
</html>
 
​

All that appears on my screen is :- [what displays on my browser][1] [1]: https://i.stack.imgur.com/PQmJu.png

I checked and my main.js file is definitely executing, but nothing is rendering on the screen

Answer

You have a few issues.

document.querySelector('.canvas')

JavaScript
 
document.querySelector('.canvas')
​

This would select elements with the class canvas, but your DOM has no such element. It does have an element with the type canvas and the ID globe, so that line should be one of the following:

document.querySelector('canvas')
document.querySelector('#globe')
document.getElementById('globe')

JavaScript
 
document.querySelector('canvas')
document.querySelector('#globe')
document.getElementById('globe')
​

Next,

renderer.setSize(window.innerWidth / window.innerHeight);

JavaScript
 
renderer.setSize(window.innerWidth / window.innerHeight);
​

As @Mugen87 points out, this should be

renderer.setSize(window.innerWidth, window.innerHeight);

JavaScript
 
renderer.setSize(window.innerWidth, window.innerHeight);
​

As you’ve written it, the renderer’s width is being set to the quotient, and its height (the missing second parameter) is being set to undefined, a situation that three.js has no handling for.

And,

globe.rotateOnAxis += 0.01;

JavaScript
 
globe.rotateOnAxis += 0.01;
​

rotateOnAxis is a function that takes a vector (the axis of rotation) and a scalar (the rotation angle) as its parameters. By assigning +0.01 to it, you’re simply replacing the function itself, not calling the function. If, for example, you want to rotate around the globe’s y-axis, you could use

globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01);

JavaScript
 
globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01);
​

Finally, the second call to renderer.render(...) (the one outside the animate() function) is unnecessary.

Advertisement

Answer