Mesh not rendering in the canvas

Questions
1

Hey there, I’m new at this awesome framework. Im just struggling to render a simple torus geometry. I 've followed a tutorial up to this but I can’t get the the geometry render on the canvas. I think the canvas is rendering but not the actual geometry. If anyone could help me it would be really appreciated.

import './style.css';

import * as THREE from 'three';

const scene = new THREE.Scene();

const camara = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

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

renderer.render( scene, camera );

//Geometry

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshStandardMaterial({ color: 0xff6347});
const torus = new THREE.Mesh( geometry, material );

scene.add(torus);

const pointLight = new THREE.PointLight(0xfffffff);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

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

  renderer.render( scene, camara);
}

animate();


canvas {
  position: fixed;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>

    <canvas id="bg"></canvas>
    <script type="module" src="/main.js"></script>
  </body>
</html>
2

There is a typo. You want to name the variable camera. Updated code: Edit fiddle - JSFiddle - Code Playground

1 Like