Recently, I've been working on creating a portfolio using three.js. However, I'm facing an issue where the object is not appearing on the page and I can't figure out what's causing the problem in my code. Here's the project link: https://codepen.io/BernardoOlisan/pen/vYJmpVZ. Can someone help me identify the issue?
<h1>Three.js</h1>
<canvas id="bg"></canvas>
CSS
canvas {
position: relative;
width: 100%;
top: 200px;
}
JS
// Main js for Three.js section work
import * as THREE from "https://cdn.skypack.dev/three";
const scene = new THREE.Scene();
const camera = 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(30);
renderer.render(scene, camera)
const geometry = new THREE.TorusGeometry(10, 3, 16, 100)
const material = new THREE.MeshBasicMaterial({ color: 0xFF6347 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus)
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate()