我在 Three.js 中看不到对象

Question

所以我正在尝试用 three.js 制作一个作品集。问题是我在页面中看不到对象，我不知道我的代码有什么问题。这是项目 https://codepen.io/BernardoOlisan/pen/vYJmpVZ 我的代码有什么问题？

<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()

Answer 1

只是 window.ineerWidth

处的错字

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

我在 Three.js 中看不到对象

I can't see the object in Three.js

javascript

three.js

codepen