【亲测免费】 相机控制器相机controls - 用于THREE.js的高级版本

1. 项目介绍

camera-controls 是一个基于THREE.js的扩展库，它提供了类似 THREE.OrbitControls 的功能，但增加了平滑过渡和其他高级特性。这个库支持多种交互模式，包括轨道旋转、移动和平移，还有自定义用户输入配置。此外，它还提供了对边界适应、无限缩放、焦点偏移等功能的支持。

2. 项目快速启动

安装

通过npm安装：

npm install camera-controls

在你的THREE.js应用程序中导入并使用：

import { CameraControls } from 'camera-controls';

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// 初始化相机控制器
new CameraControls(camera, renderer.domElement);

基本使用

import React, { useRef, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { PerspectiveCamera, AmbientLight, DirectionalLight } from '@react-three/drei';
import { CameraControls } from 'camera-controls';

function App() {
  const cameraRef = useRef();

  useEffect(() => {
    const controls = cameraRef.current;
    if (controls) {
      // 自定义设置，如禁用用户输入
      controls.enabled = false; 
    }
  }, [cameraRef]);

  return (
    <Canvas>
      <ambientLight />
      <directionalLight position={[10, 10, 10]} />
      <PerspectiveCamera makeDefault position={[-30, 30, 30]}>
        {/* 添加相机控制器 */}
        <CameraControls ref={cameraRef} />
      </PerspectiveCamera>
    </Canvas>
  );
}

export default App;

3. 应用案例和最佳实践

为了实现平滑过渡，你可以使用 enableTransition 和 transitionTime 属性。例如：

controls.enableTransition = true;
controls.transitionTime = 1; // 单位是秒
controls.update(); // 更新控制状态

当你需要恢复默认视图时，可以使用 reset() 方法：

controls.reset();

4. 典型生态项目

• @react-three/drei: 提供了与React Three Fiber集成的各种组件，包括 CameraControls。
• three/examples/jsm/controls/*: 包含THREE.js官方提供的各种原生控制组件，如OrbitControls和FlyControls。

这个库与其他THREE.js项目结合使用，可以创建丰富的交互式3D场景，例如虚拟现实体验、3D模型查看器或游戏环境。

---

了解更多详情和完整的API参考，请访问项目的GitHub页面：https://github.com/yomotsu/camera-controls 。