three.js怎么监听 requestAnimationFrame

在 three.js 中，你可以使用 `requestAnimationFrame` 方法来监听每一帧的渲染循环。下面是监听 `requestAnimationFrame` 的方法：

function animate() {
    requestAnimationFrame(animate);
    // 在此处可以编写你的代码，每一帧都会执行这里的代码
}

// 开始渲染循环
animate();

在 `animate` 函数中，你可以编写每一帧需要执行的代码。`requestAnimationFrame` 方法会在浏览器下一次进行重绘之前调用 `animate` 函数，创建了一个渲染循环。

相关问题

three.js 鼠标交互

在 three.js 中实现鼠标交互需要借助于鼠标事件，例如鼠标移动、鼠标点击等。下面是一个简单的示例，展示如何在 three.js 场景中实现鼠标交互：

1. 创建场景、相机、渲染器等 three.js 常规组件。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

2. 创建一个立方体模型。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3. 监听鼠标移动事件，根据鼠标位置计算相机旋转角度。

let isDragging = false;
let previousMousePosition = {
  x: 0,
  y: 0
};

renderer.domElement.addEventListener('mousedown', e => {
  isDragging = true;
});

renderer.domElement.addEventListener('mousemove', e => {
  if (isDragging) {
    const { x, y } = e;
    const deltaMove = {
      x: x - previousMousePosition.x,
      y: y - previousMousePosition.y
    };
    const deltaRotationQuaternion = new THREE.Quaternion()
      .setFromEuler(new THREE.Euler(
        toRadians(deltaMove.y * 1),
        toRadians(deltaMove.x * 1),
        0,
        'XYZ'
      ));
    cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
  }
  previousMousePosition = { x: e.x, y: e.y };
});

renderer.domElement.addEventListener('mouseup', e => {
  isDragging = false;
});

4. 渲染场景。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

需要注意的是，这只是一个简单的示例，实际应用中可能需要更复杂的鼠标交互逻辑，例如拖拽、点击、双击等。可以根据实际需求来添加相应的鼠标事件监听器，并编写相应的交互逻辑。

如何使用three.js

Three.js是一个基于WebGL的3D图形库，可以用它来创建各种3D场景和动画。下面是使用Three.js的基本步骤：

1. 引入Three.js库文件：

<script src="https://cdn.staticfile.org/three.js/r128/three.min.js"></script>

2. 创建场景、相机、渲染器：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

其中，PerspectiveCamera是透视相机，第一个参数75是视角（单位：度），第二个参数是宽高比，第三个参数是近截面，第四个参数是远截面。

3. 创建物体（例如立方体）：

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

其中，BoxGeometry是立方体几何体，MeshBasicMaterial是基础材质，color参数是颜色。

4. 设置物体位置和相机位置：

cube.position.z = -5;
camera.position.z = 5;

其中，物体位置和相机位置都是在z轴上。

5. 渲染场景：

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

animate函数是一个循环函数，每次循环中更新物体的旋转角度并渲染场景。

6. 如果需要响应鼠标或键盘事件，可以添加相应的事件监听器：

document.addEventListener('keydown', function(event) {
    if (event.keyCode == 37) { // 左箭头键
        cube.position.x -= 0.1;
    } else if (event.keyCode == 39) { // 右箭头键
        cube.position.x += 0.1;
    }
});

以上就是使用Three.js的基本步骤。更多的场景设置、灯光设置、材质设置、纹理贴图、动画等功能可以参考Three.js官方文档。