文章目录

前言
一、相机控件

前言

相机控件是一种可以在移动设备上使用的软件工具，它可以让开发者轻松地在应用程序中添加相机功能。相机控件可以提供诸如拍照、录像、闪光灯控制、对焦等功能，并允许开发人员对其进行自定义配置和调整。使用相机控件，开发者可以快速构建相机应用程序或将相机功能集成到现有应用程序中，从而为用户提供更好的拍照和录像体验。

一、相机控件

Three.js中有多种相机控件可供使用：

TrackballControls：可以通过鼠标拖拽、滚轮缩放、键盘移动相机，实现类似于球形的相机旋转操作。
OrbitControls：可以通过鼠标拖拽和滚轮缩放实现类似于行星环绕的相机旋转操作。
FlyControls：可以通过鼠标移动和键盘操作来控制相机在三维空间中的移动和旋转。
RollControls：可以用来控制场景中的相机的翻滚。
FirstPersonControls：可以通过鼠标和键盘来控制相机的移动和旋转，类似于第一人称游戏中的操作。

使用相机控件可以有效地简化相机操作，并且提高用户交互性和体验。

1.TrackballControls轨迹球控件

Three.js中的TrackballControls（轨迹球控件）是一个交互控件，使用户可以通过拖动、缩放和旋转场景来与3D场景进行交互。它是与Three.js中相机一起使用的控件，可以配置为支持不同的用户交互模式。

TrackballControls使得用户可以旋转相机、放大缩小场景，并且可以自由移动场景中的物体。它可以通过鼠标或触摸屏进行操作，也支持键盘和手柄控制。在使用时，需要将它添加到渲染器中，并将其与相机和场景相关联。

以下是使用TrackballControls的代码示例：

// 创建一个轨迹球控件
var controls = new THREE.TrackballControls(camera);

// 将轨迹球控件添加到渲染器中
renderer.domElement.addEventListener('mousedown', function() {
    
    
  controls.enabled = true;
});
renderer.domElement.addEventListener('mouseup', function() {
    
    
  controls.enabled = false;
});

// 使用轨迹球控件更新相机的位置和方向
function render() {
    
    
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}
render();

在上面的代码中，我们首先创建了一个轨迹球控件，并将其添加到渲染器中。然后，我们将控件与鼠标事件相关联，以使用户可以通过鼠标移动相机或缩放场景。最后，我们使用轨迹球控件更新相机的位置和方向，并渲染场景。

在这里插入图片描述

2.FirstPersonControls第一人称控件

Three.js中的FirstPersonControls是一个控件，使用户能够在Three.js场景中以第一人称视角进行导航和交互。

该控件提供了以下功能：

通过鼠标移动控制相机的方向和角度。
通过键盘控制相机的移动和旋转。
支持鼠标缩放功能。

使用该控件，需要将其添加到场景中，并将相机作为参数传递给控件构造函数。然后，可以从动画循环中调用控件的update()方法，以便每帧更新相机的位置和方向。

以下是使用FirstPersonControls控件的示例代码：

// 创建一个Three.js场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// 创建一个FirstPersonControls控件
var controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;

// 将相机添加到场景中
scene.add(camera);

// 在动画循环中更新控件
function animate() {
    
    
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

在上面的示例中，我们创建了一个FirstPersonControls控件，并将相机作为参数传递给构造函数。然后，我们设置了控件的movementSpeed和lookSpeed属性，以便控制相机的移动和旋转速度。最后，我们在动画循环中调用了控件的update()方法，以便更新相机的位置和方向。

在这里插入图片描述

3.FlyControls飞行控件

FlyControls是Three.js中的一个控制器，可以用于模拟飞行器的控制。它可以通过鼠标和键盘来控制飞行的方向和速度。

使用FlyControls之前，需要先创建一个相机对象和一个渲染器对象。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

然后创建一个FlyControls对象，并将相机对象传递给它。

var controls = new THREE.FlyControls(camera);

现在可以通过以下方式来控制相机的飞行。

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

FlyControls有一些属性可以调整，比如movementSpeed，rollSpeed，dragToLook等等。可以通过设置这些属性来改变相机的飞行表现。

controls.movementSpeed = 100;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;

FlyControls还有一些事件可以监听，比如change、lock、unlock等等，可以在相应的事件触发时做出相应的响应。

controls.addEventListener('change', function() {
    
    
    console.log('controls changed');
});

在这里插入图片描述

4.RollControls翻滚控件

RollControls是Three.js中的一个控制器，它可以用来控制场景中的相机的翻滚。相机的翻滚是指相机绕着场景中的中心点旋转，并且相机的方向始终朝向中心点。RollControls可以让用户通过鼠标或者触摸手势来控制相机的翻滚，从而达到更好的交互效果。

下面是使用RollControls来控制相机翻滚的示例代码：

// 创建场景、相机、渲染器等元素
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

// 添加一个立方体到场景中
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 将相机的位置设置为(0, 0, 3)，并将其方向朝向场景中心点
camera.position.z = 3;
camera.lookAt(0, 0, 0);

// 创建一个RollControls控制器，并将其绑定到相机上
var controls = new THREE.RollControls(camera);
controls.target.set(0, 0, 0);

// 将渲染器的输出添加到页面中
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景
function render() {
    
    
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

render();

在这个示例中，我们首先创建了场景、相机和渲染器等元素，并将一个立方体添加到场景中。然后我们将相机的位置设置为(0, 0, 3)，并将其方向朝向场景中心点。

接着，我们创建了一个RollControls控制器，并将其绑定到相机上。我们通过设置控制器的target属性来指定相机的目标点为场景中心点。

最后，我们渲染场景并启用动画效果。用户可以通过鼠标或者触摸手势来控制相机的翻滚，从而达到更好的交互效果。

在这里插入图片描述

5.OrbitControls轨道控件

OrbitControls是Three.js提供的一个轨道控件，可以通过它来控制相机的位置和方向，实现场景的旋转、缩放和移动等操作。

使用OrbitControls非常简单，只需要在场景中创建一个OrbitControls对象，并将相机作为参数传递给它即可：

var controls = new THREE.OrbitControls(camera);

在渲染循环中，需要调用OrbitControls的update方法来更新相机的位置和方向：

function animate() {
    
    
    requestAnimationFrame(animate);

    // 更新控件
    controls.update();

    // 渲染场景
    renderer.render(scene, camera);
}

接下来，可以在控件上设置一些参数来实现不同的控制效果：

enableZoom：是否启用缩放，默认为true
enableRotate：是否启用旋转，默认为true
enablePan：是否启用平移，默认为true
minDistance：相机可以向前移动的最小距离，默认为0
maxDistance：相机可以向后移动的最大距离，默认为Infinity
minPolarAngle：相机可以向下旋转的最小角度，默认为0
maxPolarAngle：相机可以向上旋转的最大角度，默认为Math.PI
minAzimuthAngle：相机可以向左旋转的最小角度，默认为- Infinity
maxAzimuthAngle：相机可以向右旋转的最大角度，默认为Infinity

例如，以下代码设置了只能缩放和旋转，且相机的最小距离为10，最大距离为100：

var controls = new THREE.OrbitControls(camera);
controls.enableZoom = true;
controls.enableRotate = true;
controls.enablePan = false;
controls.minDistance = 10;
controls.maxDistance = 100;

在这里插入图片描述

6.完整案例源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      
      
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/OBJLoader.js"></script>
  <script src="../lib/three/MTLLoader.js"></script>
  <script src="../lib/three/OBJMTLLoader.js"></script>

  <!-- 轨迹球控件 -->
  <script src="../lib/three/TrackballControls.js"></script>
  <!-- 第一人称控件 -->
  <script src="../lib/three/FirstPersonControls.js"></script>
  <!-- 飞行控件 -->
  <script src="../lib/three/FlyControls.js"></script>
  <!-- 翻滚控件 -->
  <script src="../lib/three/RollControls.js"></script>
  <!-- 轨道控件 -->
  <script src="../lib/three/OrbitControls.js"></script>
</head>
<body>

</body>
</html>

<script>
  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(100,100,0);
  camera.lookAt(new THREE.Vector3(0,0,0));

  //const trackball = new THREE.TrackballControls(camera);
  //const controls = new THREE.FirstPersonControls(camera)
  //controls.lookSpeed = 0.2
  //const controls = new THREE.FlyControls(camera)
  //controls.rollSpeed = 0.5
  //const controls = new THREE.RollControls(camera)
  const controls = new THREE.OrbitControls(camera)


  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000,8000,4000);
  scene.add(spotLight);

  const loader = new THREE.OBJMTLLoader()

  loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {
      
      
    scene.add(mesh);
  });

  const animation = () => {
      
      
    controls.update(clock.getDelta());
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>

【愚公系列】2023年08月 Three.js专题-相机控件

文章目录

前言

一、相机控件

1.TrackballControls轨迹球控件

2.FirstPersonControls第一人称控件

3.FlyControls飞行控件

4.RollControls翻滚控件

5.OrbitControls轨道控件

6.完整案例源码

猜你喜欢