renderer.render in three.js is not displaying the content on screen

September 29, 2022

I just started out with three.js(and do not know much about it), was following a tutorial according to which a green box should appear on the screen. I’m not having any errors in the console. I’m just having an empty black screen

my index.html

   <!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>Vite App</title>

  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>

  <script type="module" src="/main.js">




  </script>

  <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.126.1/build/three.module.js"
      }
    }
  </script>


</body>

</html>

MAIN.JS

import * as THREE from "https://unpkg.com/three@0.126.1/build/three.module.js";

  const scene = new THREE.Scene();


  
  const camera =new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1,1000)
        
  const renderer= new THREE.WebGL1Renderer();
  
  console.log(scene);
  console.log(camera);
  console.log(renderer);

  document.body.appendChild(renderer.domElement);

  renderer.setSize(innerWidth , innerHeight); 

  const boxGeometery=new THREE.BoxGeometry(1,1,1) // width length and height

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

  const mesh=new THREE.Mesh(boxGeometery , material);

  scene.add(mesh);

  renderer.render(scene,camera)

  camera.position.z=5;


  console.log(mesh)
  console.log(material)
  console.log(boxGeometery);

NOTE = I’havent installed three.js with npm but have included the cdn link

and this is the output of the instructore with the green box. Whereas I am not getting any such green box on my screen

Can somebody please help

>Solution :

You are missing animation loop and use proper color code (you are missing one "f").

import * as THREE from "https://unpkg.com/three@0.126.1/build/three.module.js";


let scene, renderer, camera;


scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000)

renderer = new THREE.WebGL1Renderer();

document.body.appendChild(renderer.domElement);

renderer.setSize(innerWidth, innerHeight);

const boxGeometery = new THREE.BoxGeometry(1, 1, 1) // width length and height

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

const mesh = new THREE.Mesh(boxGeometery, material);

scene.add(mesh);

camera.position.z = 5;
renderer.setAnimationLoop(loop);


function loop() {
    renderer.render(scene, camera)
}