Location>code7788 >text

Getting Started - Camera Controller

Popularity：21 ℃/2024-12-09 15:23:41

Introduction to the concept

Before we start, let's take a look at the effect, I have created a cube in the scene that rotates the camera view when we click the left mouse button and drag, and scroll the mouse wheel to zoom the camera view.

file

I believe you have a visual understanding of the Camera control after seeing the animated effect. It is a tool for controlling the camera, which can help users to rotate, zoom and * move the camera freely in the 3D scene, providing a more friendly interactive experience.

The Camera is a key element in determining how the scene is rendered. It is the "window" from which the user sees the 3D scene. Camera Controls are tools that allow the developer to dynamically adjust the camera's view, position, and zoom within the scene. Controlling the behavior of the camera is an important part of most 3D applications, especially those that require interaction.

Common camera types:

PerspectiveCamera

This is the most common type of camera, and it mimics the vision of the human eye. The range of observation is determined by setting the field of view angle, the *cropping* plane, and the far cropping* plane.

OrthographicCamera

Unlike perspective cameras, orthogonal cameras have a view without perspective distortion and are suitable for scenarios that require a *row* view, such as 2D games, CAD, or certain types of data visualization.

Common Camera Controls

Some very powerful camera controls are provided to enhance the user's interaction with the 3D scene. These controls typically utilize input devices such as mice, trackpads, etc. and allow the user to rotate, zoom, and *move* the camera.

2.1 OrbitControls
OrbitControls is one of the most commonly used camera controls. It allows you to rotate, zoom and drag around a target point and is suitable for most scenarios that require camera interaction.

usage

  1. Start by creating a cube in the scene as a target point for OrbitControls.
import * as THREE from "three";

const scene = new ();
const camera = new (
  75,
   / ,
  0.1,
  1000
);
const renderer = new ();

(, );
();

(0, 0, 5);

const geometry = new ();
const material = new ({ color: 0x00ff00 });
const cube = new (geometry, material);
(cube);

function render() {
  (scene, camera);
}

render();

file

  1. Next, we introduce a coordinate system aid for better observing the changes when we operate later on
const axesHelper = new (5);
(axesHelper);

file

  1. Finally, the camera controller is introduced. Camera controllers can't be introduced directly via (), but if you installed them via the npm package manager, you can find the files in node_modules/three/examples/jsm/controls and introduce them via import.

file
So you can introduce OrbitControls in the following way:

import { OrbitControls } from "three/examples/jsm/controls/";

Finally, the complete introduction code is as follows:

import { OrbitControls } from "three/examples/jsm/controls/" ;
// Create a controller
const controls = new OrbitControls(camera, ); // create a control; // update the control; // update the control; // update the control; // update the control.
// Update the controls
(); // Add event listeners.
// Add an event listener to re-render the control when it changes
("change", render); // Add an event listener to re-render the control when it changes.

As you can see, introducing a controller is very simple, just pass in the camera and renderer dom elements. Then update the control via the update() method, add event listeners, and re-render the control when it changes.

The complete code is below:

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/";

const scene = new ();
const camera = new (
  75,
   / ,
  0.1,
  1000
);
const renderer = new ();

(, );
();

const controls = new OrbitControls(camera, );

(0, 0, 5);
();

const geometry = new ();
const material = new ({ color: 0x00ff00 });
const cube = new (geometry, material);
(cube);

const axesHelper = new (5);
(axesHelper);

function render() {
  (scene, camera);
}

("change", render); // add this line to re-render on control changes

render(); // initial render

Study:https:///

<Previous Next>