Why does it not render?

Question

I am trying three.js for the first time. I looked up a tutorial and copied the exact same code but for some reason but it's not working. I checked the class in html, the link between the js file the script attribute in html, I tried chatGPT and other sources, but still could not figure it out. I know there is no light added, but according to the tutorial I am following, it should have at least that black rectangle for the 3d model.

const scene = new THREE.Scene();


const geometry = new THREE.BoxGeometry( 3, 64, 64 );
const material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube);
// scene.add(light);

const camera = new THREE.PerspectiveCamera( 75, 800 / 600);
scene.add(camera);
camera.position.z = 5;


const canvas = document.querySelector(".computer")
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize( 800, 600 );
renderer.render(scene, camera);

the html file ---- 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <link rel="stylesheet" href="./style.css">
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: '#da373d',
            }
          }
        }
      }
    </script>
      <style type="text/tailwindcss">
        @layer utilities {
          .content-auto {
            content-visibility: auto;
          }
        }
      </style>
      <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <title>Document</title>
    </head>


<body class="indigo-900">
  <div class="">  
  <nav class="">
        <ol>
            <li class="home">Home</li>
            <li class="projects">Projects</li>
            <li class="education">Education</li>
            <li class="contact">Contact</li>
        </ol>
    </nav></div>
    <div class = 'intro'>
        <canvas class="computer"></canvas>
        
        <p class="intorduction"> Scroll down to know me more</p>  
      </div>
    <script type="module" src="/index.js"></script>
</body>
</html>

Read above, I have explained everything I have tried so far.

where is the reference to the three js script? – epascarello May 15 '23 at 15:32 — epascarello, May 15 '23 at 15:32
You spelled `intorduction` wrong – epascarello May 15 '23 at 15:32 — epascarello, May 15 '23 at 15:32
What errors does your console show? – cconsta1 May 17 '23 at 08:27 — cconsta1, May 17 '23 at 08:27

Why does it not render?

0 Answers0