Así que estoy tratando de hacer un portafolio con tres.js. El problema es que no puedo ver el objeto en la página y no sé cuál es el problema con mi código. aquí está el proyecto https://codepen.io/BernardoOlisan/pen/vYJmpVZ ¿Qué tiene de malo mi código?

 <h1>Three.js</h1> <canvas id="bg"></canvas>

CSS

 canvas { position: relative; width: 100%; top: 200px; }

JS

 // Main js for Three.js seciton work import * as THREE from "https://cdn.skypack.dev/three"; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.ineerWidth / 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()