[Yugong Series] Three.js Topic in August 2023 - Camera Control

---

foreword

A camera control is a software tool available on mobile devices that allows developers to easily add camera functionality to their applications. Camera controls can provide functions such as taking pictures, recording videos, flash control, focusing, etc., and allow developers to customize and adjust them. Using camera controls, developers can quickly build camera applications or integrate camera functions into existing applications, thereby providing users with better photo and video experience.

1. Camera controls

There are various camera controls available in Three.js:

1. TrackballControls: You can drag the mouse, scroll the wheel to zoom, and move the camera with the keyboard to achieve a spherical camera rotation operation.

2. OrbitControls: You can achieve a camera rotation operation similar to planetary orbiting by dragging the mouse and zooming with the scroll wheel.

3. FlyControls: The movement and rotation of the camera in three-dimensional space can be controlled by mouse movement and keyboard operation.

4. RollControls: Can be used to control the rollover of the camera in the scene.

5. FirstPersonControls: You can control the movement and rotation of the camera through the mouse and keyboard, similar to the operation in the first-person game.

Using camera controls can effectively simplify camera operations and improve user interactivity and experience.

1.TrackballControls trackball control

TrackballControls (trackball control) in Three.js is an interactive control that enables users to interact with 3D scenes by dragging, zooming, and rotating the scene. It is a control that works with the camera in Three.js and can be configured to support different modes of user interaction.

TrackballControls allow the user to rotate the camera, zoom in and out of the scene, and freely move objects in the scene. It can be operated by mouse or touch screen, and also supports keyboard and joystick control. When used, it needs to be added to the renderer and associated with the camera and the scene.

Here is a code sample using 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();

In the code above, we first create a trackball control and add it to the renderer. We then associate the controls with mouse events so that the user can move the camera or zoom the scene with the mouse. Finally, we update the camera's position and orientation using the trackball controls, and render the scene.

2.FirstPersonControls first-person control

FirstPersonControls in Three.js is a control that enables users to navigate and interact in a Three.js scene from a first-person perspective.

The control provides the following functions:

1. Control the direction and angle of the camera by mouse movement.
2. Control the movement and rotation of the camera through the keyboard.
3. Support mouse zoom function.

To use this control, you need to add it to the scene and pass the camera as a parameter to the control constructor. You can then call the control's update() method from within the animation loop to update the camera's position and orientation every frame.

The following is sample code using the FirstPersonControls control:

// 创建一个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();

In the above example, we created a FirstPersonControls control and passed the camera as a parameter to the constructor. Then, we set the movementSpeed ​​and lookSpeed ​​properties of the control in order to control the camera's movement and rotation speed. Finally, we call the control's update() method in the animation loop to update the camera's position and orientation.

3.FlyControls flight controls

FlyControls is a controller in Three.js that can be used to simulate the control of aircraft. It can control the direction and speed of flight by mouse and keyboard.

Before using FlyControls, you need to create a camera object and a renderer object.

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);

Then create a FlyControls object and pass the camera object to it.

var controls = new THREE.FlyControls(camera);

The camera's flight can now be controlled in the following ways.

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

FlyControls have some properties that can be adjusted, such as movementSpeed, rollSpeed, dragToLook, etc. The flight behavior of the camera can be changed by setting these properties.

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

FlyControls also has some events that can be listened to, such as change, lock, unlock, etc., and can respond accordingly when the corresponding event is triggered.

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

4.RollControls rolling control

RollControls is a controller in Three.js, which can be used to control the roll of the camera in the scene. The tumbling of the camera means that the camera rotates around the center point in the scene, and the direction of the camera is always towards the center point. RollControls allows users to control the roll of the camera through mouse or touch gestures, so as to achieve better interaction effects.

The following is a sample code that uses RollControls to control camera roll:

// 创建场景、相机、渲染器等元素
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();

In this example, we first created elements such as the scene, camera and renderer, and added a cube to the scene. We then set the camera's position to (0, 0, 3) and orient it towards the center of the scene.

Next, we create a RollControls controller and bind it to the camera. We specify the camera's target point as the center of the scene by setting the target property of the controller.

Finally, we render the scene and enable animation. Users can control the roll of the camera through mouse or touch gestures, so as to achieve better interactive effects.

5. OrbitControls track control

OrbitControls is an orbit control provided by Three.js, which can be used to control the position and direction of the camera, and realize operations such as rotation, zoom and movement of the scene.

Using OrbitControls is very simple, just create an OrbitControls object in the scene and pass the camera as a parameter to it:

var controls = new THREE.OrbitControls(camera);

In the rendering loop, you need to call the update method of OrbitControls to update the camera's position and orientation:

function animate() {
    
    
    requestAnimationFrame(animate);

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

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

Next, you can set some parameters on the control to achieve different control effects:

• enableZoom: whether to enable zoom, the default is true
• enableRotate: whether to enable rotation, the default is true
• enablePan: Whether to enable panning, the default is true
• minDistance: The minimum distance the camera can move forward, the default is 0
• maxDistance: The maximum distance the camera can move backwards, the default is Infinity
• minPolarAngle: The minimum angle that the camera can rotate downwards, the default is 0
• maxPolarAngle: The maximum angle that the camera can rotate upwards, the default is Math.PI
• minAzimuthAngle: The minimum angle the camera can rotate to the left, default - Infinity
• maxAzimuthAngle: The maximum angle that the camera can rotate to the right, the default is Infinity

For example, the following code sets only zoom and rotation, and the minimum distance of the camera is 10, and the maximum distance is 100:

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

6. Complete case source code

<!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>