[英]I can't see the object in Three.js
So I'm trying to make a portafolio with three.js.所以我试图用three.js制作一个作品集。 The problem is that I can't see the object in the page and I don't know what is wrong with my code.问题是我在页面中看不到对象,也不知道我的代码有什么问题。 here is the project https://codepen.io/BernardoOlisan/pen/vYJmpVZ What is wrong with my code?这是项目https://codepen.io/BernardoOlisan/pen/vYJmpVZ我的代码有什么问题?
<h1>Three.js</h1>
<canvas id="bg"></canvas>
CSS CSS
canvas {
position: relative;
width: 100%;
top: 200px;
}
JS 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()
window.ineerWidth
只是一个错字
const camera = new THREE.PerspectiveCamera( 75, window.ineerWidth / window.innerHeight, 0.1, 1000 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.