🚀 THREE.js Lesson: OrbitControls & FlyControls

Interacting with your 3D scene is crucial for development and user experience. THREE.js provides powerful camera controls to navigate your virtual world. In this lesson, we'll explore two fundamental control types: OrbitControls for inspecting objects and FlyControls for free-flight navigation.

📦 Code Sample

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/controls/OrbitControls.js';
import { FlyControls } from 'https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/controls/FlyControls.js';

const canvas = document.getElementById('previewCanvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0x222222);
renderer.setPixelRatio(window.devicePixelRatio); // Improve rendering quality on high-DPI screens

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
camera.position.set(0, 2, 5); // Set initial camera position

// Add a central object (e.g., a sphere)
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshNormalMaterial(); // Shows normals for better visual feedback
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Add a grid helper for better spatial awareness
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

// Add axes helper
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

// Initialize OrbitControls
// Uncomment this line AND the orbitControls.update() in animate() to enable OrbitControls
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true; // Animate damping (smoothness)
orbitControls.dampingFactor = 0.05;
orbitControls.screenSpacePanning = false; // Panning in screen space
orbitControls.maxPolarAngle = Math.PI / 2; // Limit vertical rotation

// Initialize FlyControls
// Uncomment this line AND the flyControls.update(delta) in animate() to enable FlyControls
// const flyControls = new FlyControls(camera, renderer.domElement);
// flyControls.movementSpeed = 0.5; // Adjust speed
// flyControls.rollSpeed = Math.PI / 24; // Adjust roll speed
// flyControls.autoForward = false; // Don't move forward automatically
// flyControls.dragToLook = true; // Only look when mouse button is pressed

const clock = new THREE.Clock(); // Required for FlyControls

function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta(); // Get time elapsed since last frame

    // Update controls based on which one is active
    // To switch, uncomment the desired control's update method and comment out the other.
    orbitControls.update(); // Always update OrbitControls if damping is enabled
    // flyControls.update(delta); // Update FlyControls with delta time

    renderer.render(scene, camera);
}

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
});

animate();

💡 Pro Tips:

OrbitControls are ideal for examining specific objects, allowing you to rotate around them, pan (right-click drag or two-finger drag), and zoom (scroll wheel).
FlyControls provide a "first-person" flying experience. Use W, A, S, D for movement, R/F for up/down, and mouse drag to look around (if dragToLook is true).
Remember to call controls.update() (for OrbitControls with damping) or controls.update(delta) (for FlyControls) in your animation loop.
FlyControls require a THREE.Clock() instance to calculate the delta time for smooth, frame-rate independent movement.
You typically use only one control type actively at a time. Comment out or disable one if you want to test the other to avoid conflicts.
Adjust movementSpeed and rollSpeed for FlyControls to suit your scene's scale and desired feel.

🧠 What You Learned

How to import and initialize OrbitControls and FlyControls from the THREE.js examples.
The primary use cases and interaction methods for each control type.
The importance of calling update() on controls within the animation loop for proper functionality.
How to use THREE.Clock for time-dependent updates, especially with FlyControls.
Basic configuration options for both control types to customize behavior.

```