Canvas not even showing

Questions
,
1

Hello I am new to Three.js and I wanted to make a project with a 3D Torus in the background. I am following a beginners tutorial but I notice that when I open index.html it is only a white screen. Not even the canvas is showing. Here is my index.html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SAT Timing</title>
  </head>
  <body>
    <canvas id='bg'></canvas>
    <script type="module" src="main.js"></script>
  </body>
</html>

and here is my main.js code

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

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //ange, aspect ratio, view frustum

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshStandartMaterial({color: 0x55286F , wireframe: true});

const torus = new THREE.Mesh(geometry, material);
const ambientLight = new THREE.AmbientLight(0xffffff)
ambientLight.position.set(20,20,20)
scene.add(torus)

const pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(20,20,20)

scene.add(pointLight, ambientLight)

const lightHelper = new THREE.PointLightHelper(0xffffff)
const gridHelper = new THREE.GridHelper();
scene.add(lightHelper, gridHelper)

function animate(){

  requestAnimationFrame( animate ); 
  torus.rotation.x += 0.01;
  torus.rotation.y += 0.005;
  torus.rotation.z += 0.01

  renderer.render( scene, camera );
}
animate()

style.css is only
canvas{
position: fixed;
}

so nothing there as well.

Can you help me?

2

make sure in CSS your canvas has a width and height

3

Added them to 100% and still its a white screen, so no canvas.

4

Consider Chrome Devtools Console your best new friend. In 99% of cases it will explain you precisely what is wrong.

In this case the “wrong” is the typo in MeshStandardMaterial :sweat_smile: (As long as you have the <canvas width="some-width" height="some-height /> also set - besides the typo it does seem to work correctly.)

5

I did change the typo, however, the canvas still doesn’t show. It does reflect as an HTML object on the developer tools, however, I don’t think it understands it’s a canvas. It is still just a white screen and is not showing anything.

6

Your code copied to codepen works - so, assuming you’re still using the code from the earlier post with just the typo fixed, it should be alright.

Take a look into devtools if there are any errors, use console.log to check if values of your variables are correct, also be sure to check if the canvas has a set width and height.

7

Canvas by default is transparent, so if you add a border, you will see where it is and the size of it:

canvas {
  border: solid 1px red;
  position: fixed;
}

as @mjurczyk noticed you misspelled the name of the material, also point light helper doesn’t accept color as a parameter and you can’t import CSS files using import statement in JavaScript modules.

With all that out of the way, your code works:

2 Likes
8

So, if it opens fine in an online compiler, then why doesn’t it open on my index.html file on the browser? Should I have downloaded something beforehand? If I host the webpage will it work?

9

File like this should work on your computer and online:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SAT Timing</title>
	<style>
		body {
			background: #333;
		}
		canvas {
			border: solid 1px red;
			position: fixed;
		}
	</style>
  </head>
  <body>
    <canvas id="bg"></canvas>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three/build/three.module.js'
        const scene = new THREE.Scene();

       // put the rest of JavaScript code from the fiddle here

    </script>
  </body>
</html>

if you don’t run a local web server on your computer, links to external files might not work because of CORS policy in web browsers.

1 Like
10

If the issue is CORS, running a server won’t do you any good.

11

CORS applies to local files as well, so it will.