Я не получаю никаких ошибок, которые меня смущают, он отображает черный экран. и поскольку фрагменты 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>
Запустите анимацию, вызвав функцию render
:
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);
}
render(); // <---
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>