New to Three.js - cube not rendering at all

Questions
1

Hi everyone

Super newbie to Three.js. I have followed a tutorial instructions to the letter but the cube is not rendering on the screen. Please can someone have a look at my code and see where the problem is.

I have no idea how to debug because the html simply displays as <canvas> in the console.

Thank you

import * as THREE from “three”;

let renderer, camera, container, scene;

window.addEventListener(“load”, function () {

start();

});

async function start() {

renderer = new THREE.WebGL1Renderer({ antialias: true });

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

container = document.getElementById(“threejsContainer”);

container.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(

60,

window.innerHeight,

window.innerWidth,

0.1,

1000,

);

camera.position.z = 5000;

const geometry = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshBasicMaterial({ color: 0xffff });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

renderer.render(scene, camera);

console.log(scene, camera, renderer);

}

2

Maybe the camera is too far?

3

The cube is out of frustum.
For a cube of size 1, I would use camera.position.z = 5;

4

Sorry it was originally 5 but I changed to 5000 in case I was ‘inside’ the cube. It still doesn’t work :frowning:

5

Actually, there are many other issues (e.g. The PerspectiveCamera parameters are wrong, the second must be aspect ratio).

Here is a version, that uses your style (it will be available temporarily):

https://codepen.io/boytchev/pen/LEbjNXX?editors=1010

image

6

This part is something strange. Needs to be innerWidth / innerHeight :thinking:

7

Wow it works! Thank you both!