three.js 自动旋转

以下是使用Three.js实现自动旋转的代码：

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    // 每帧旋转0.01弧度
    scene.rotation.y += 0.01;
}
animate();

在上述代码中，我们使用了`requestAnimationFrame`函数来实现动画效果。在`animate`函数中，我们每帧旋转场景0.01弧度，从而实现了自动旋转的效果。

需要注意的是，如果你想要停止自动旋转，可以使用`cancelAnimationFrame`函数来停止动画。

相关问题

react接入three.js

要将React与Three.js集成，您需要使用React Three Fiber库。React Three Fiber是一个封装了Three.js的库，它使得在React中使用Three.js变得更加容易和直观。

以下是一个简单的示例，演示如何在React中使用Three.js：

import React, { useRef } from "react";
import { Canvas, useFrame } from "react-three-fiber";
import * as THREE from "three";

function Box() {
  const meshRef = useRef();

  useFrame(() => {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={meshRef}>
      <boxBufferGeometry />
      <meshStandardMaterial color="#00ff00" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box />
    </Canvas>
  );
}

export default App;

在上面的示例中，我们创建了一个名为“Box”的组件，它是一个旋转的绿色立方体。我们使用useRef钩子来创建一个对立方体网格的引用，以便我们可以在useFrame钩子中旋转它。最后，我们将此组件放入Canvas组件中，该组件是React Three Fiber库的入口点，它会自动将Three.js场景渲染到屏幕上。

这只是一个简单的示例，React Three Fiber库还提供了许多其他功能，如相机控制、灯光、阴影等。您可以查看其文档以了解更多信息。