How to Rotate camera in Three.js with mouse

Here are the basic steps and code examples to implement this functionality:

Step 1: Import necessary modules

First, ensure that you have imported OrbitControls into your project. If you are using ES6 modules, you can import it as:

javascript
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

If you are using <script> tags to include Three.js in HTML, make sure you also include the OrbitControls script.

Step 2: Create OrbitControls

In your Three.js initialization code, create an instance of OrbitControls and associate it with your camera and the renderer's DOM element:

javascript
const controls = new OrbitControls(camera, renderer.domElement);

Here, camera is the camera object in your Three.js scene, and renderer.domElement is the DOM element bound to the renderer.

Step 3: Configure OrbitControls

You can configure various properties of OrbitControls to adjust the controller's behavior as needed, for example:

javascript
controls.enableDamping = true; // Enable damping for smoother rotation
controls.dampingFactor = 0.05; // Damping coefficient
controls.enableZoom = true; // Allow zooming
controls.rotateSpeed = 0.1; // Rotation speed

Step 4: Update Controller State

In your animation loop or render function, call controls.update() to update the controller state, which is particularly important when damping is enabled:

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

Example

Here is a complete simple example demonstrating how to use OrbitControls to control the camera:

javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

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

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

camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
    requestAnimationFrame(animate);
    controls.update(); // required if controls.enableDamping = true or controls.autoRotate = true
    renderer.render(scene, camera);
}

animate();

This code creates a scene, a camera, and a green cube, allowing users to rotate the camera with the mouse using OrbitControls. In Three.js, camera rotation is typically achieved using the OrbitControls helper library, which allows users to rotate the camera around the center of the scene using the mouse. Here are the steps to implement it:

Step 1: Import OrbitControls

Ensure that you have included OrbitControls in your project. It is not included in the core Three.js library and needs to be imported separately. If you are using ES6 modules, you can import it as:

javascript
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

If you are using <script> tags to include Three.js in HTML, make sure you also include the OrbitControls script.

Step 2: Create OrbitControls Instance

In your initialization function, create an instance of OrbitControls and pass the camera and renderer's DOM element to it.

javascript
const controls = new OrbitControls(camera, renderer.domElement);

Here, camera is your Three.js camera object, and renderer.domElement is the HTML element bound to the renderer (typically a canvas element).

Step 3: Configure OrbitControls

You can configure OrbitControls as needed. For example, you can enable or disable zooming and rotation:

javascript
controls.enableZoom = true;
controls.enableRotate = true;

OrbitControls provides various configuration options; refer to the Three.js documentation for more details.

Step 4: Update Rendering Loop

In your animation loop or render function, call controls.update() to ensure the controller responds to user interactions:

javascript
function animate() {
  requestAnimationFrame(animate);

  // Update controller
  controls.update();

  // Render scene
  renderer.render(scene, camera);
}

Example: Basic Scene

Here is a simple example code demonstrating how to set up a basic Three.js scene with rotation camera control:

javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

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

// Add lighting
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

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

// Set camera position
camera.position.z = 5;

// Create controller
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Enable damping for realism
controls.dampingFactor = 0.05;

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

In this example, we create a cube and a camera that can rotate around it using OrbitControls to handle mouse interactions. This should help you understand how to use mouse control for camera rotation in Three.js.