'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);

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>

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

javascriptcssthree.js


Solution 1:[1]

You have a few issues.

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')

Next,

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

As @Mugen87 points out, this should be

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;

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);

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

Solution 2:[2]

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

Call the method like so instead:

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


//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();
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<canvas id="canvas"></canvas>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Mugen87

Related Questions