为什么 three.js 不渲染这个旋转的立方体？

Question

我没有收到任何让我困惑的错误，它呈现黑屏。因为 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>

Answer 1

调用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>

为什么 three.js 不渲染这个旋转的立方体？

Why is three.js not rendering this spinning cube?

html

javascript

css

three.js