为什么 Three.js 不渲染这个旋转的立方体？
我没有遇到任何使我感到困惑的错误，它会导致黑屏。而且，由于HTML和CSS片段是如此小，所以我相信我的错隐藏在JS中的某个地方。
// The three.js scene: the 3D world where you put objects
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
1,
10000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa, 1);
document.body.appendChild(renderer.domElement);
const cube = {
geometry: new THREE.BoxGeometry(1, 1, 1),
material: new THREE.MeshBasicMaterial({ color: 0x00ff00 })
};
cube.mesh = new THREE.Mesh(cube.geometry, cube.material);
scene.add(cube.mesh);
camera.position.z = 5;
function render() {
renderer.render(scene, camera);
cube.mesh.rotation.x += 0.08;
cube.mesh.rotation.y -= 0.05;
requestAnimationFrame(render);
}html, body {
overflow: hidden;
user-select: none;
padding: 0;
margin: 0;
}
canvas {
width: 100%;
height: 100%;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Three.js app</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>I am not getting any errors which is confusing me, it renders a black screen. and because the HTML and CSS snippets are so tiny I believe my fault is hidden somewhere within the JS.
// The three.js scene: the 3D world where you put objects
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
1,
10000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa, 1);
document.body.appendChild(renderer.domElement);
const cube = {
geometry: new THREE.BoxGeometry(1, 1, 1),
material: new THREE.MeshBasicMaterial({ color: 0x00ff00 })
};
cube.mesh = new THREE.Mesh(cube.geometry, cube.material);
scene.add(cube.mesh);
camera.position.z = 5;
function render() {
renderer.render(scene, camera);
cube.mesh.rotation.x += 0.08;
cube.mesh.rotation.y -= 0.05;
requestAnimationFrame(render);
}html, body {
overflow: hidden;
user-select: none;
padding: 0;
margin: 0;
}
canvas {
width: 100%;
height: 100%;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Three.js app</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通过调用
渲染函数来开始动画：Start the animation by calling the
renderfunction: