3D Camera Control

A JavaScript library for simplified 3D camera manipulation and control within web applications. This package provides intuitive methods for adjusting camera position, rotation, and zoom, enhancing user interaction with 3D environments.

Installation

Install the package using npm: bash npm install 3d-camera-control

Usage Examples

Here are several examples demonstrating how to use 3d-camera-control in your JavaScript projects:

1. Basic Camera Orbit:

This example demonstrates a simple orbit control around a target point. javascript import { CameraControl } from '3d-camera-control';

// Assuming you have a THREE.js camera and scene const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const scene = new THREE.Scene();

const control = new CameraControl(camera, scene.domElement);

control.rotate(0.5, 0); // Rotate horizontally by 0.5 radians control.update(); // Update the camera based on the control state

// Animation loop (e.g., using requestAnimationFrame) function animate() { requestAnimationFrame(animate); control.update(); renderer.render(scene, camera); }

animate();

2. Zooming with Mouse Wheel:

This example shows how to implement zoom functionality using mouse wheel events. javascript import { CameraControl } from '3d-camera-control';

// Assuming you have a THREE.js camera and scene const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const scene = new THREE.Scene();

const control = new CameraControl(camera, scene.domElement);

scene.domElement.addEventListener('wheel', (event) => { const delta = Math.sign(event.deltaY); control.zoom(delta * 0.1); // Zoom by a factor of 0.1, adjusted by wheel direction control.update(); });

// Animation loop (e.g., using requestAnimationFrame) function animate() { requestAnimationFrame(animate); control.update(); renderer.render(scene, camera); }

animate();

3. Panning with Mouse Drag:

This example demonstrates how to pan the camera using mouse drag. javascript import { CameraControl } from '3d-camera-control';

// Assuming you have a THREE.js camera and scene const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const scene = new THREE.Scene();

const control = new CameraControl(camera, scene.domElement);

let isDragging = false; let previousMousePosition = { x: 0, y: 0 };

scene.domElement.addEventListener('mousedown', (event) => { isDragging = true; previousMousePosition = { x: event.clientX, y: event.clientY }; });

scene.domElement.addEventListener('mouseup', () => { isDragging = false; });

scene.domElement.addEventListener('mousemove', (event) => { if (isDragging) { const deltaX = event.clientX - previousMousePosition.x; const deltaY = event.clientY - previousMousePosition.y;

control.pan(deltaX * 0.01, deltaY * 0.01); // Pan based on mouse movement
control.update();

previousMousePosition = { x: event.clientX, y: event.clientY };

} });

// Animation loop (e.g., using requestAnimationFrame) function animate() { requestAnimationFrame(animate); control.update(); renderer.render(scene, camera); }

animate();

4. Setting Target:

This example shows how to set the target that the camera orbits around. javascript import { CameraControl } from '3d-camera-control'; import * as THREE from 'three';

// Assuming you have a THREE.js camera and scene const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const scene = new THREE.Scene();

const target = new THREE.Vector3(0, 0, 0); // Define a target point const control = new CameraControl(camera, scene.domElement); control.setTarget(target); control.update();

// Animation loop (e.g., using requestAnimationFrame) function animate() { requestAnimationFrame(animate); control.update(); renderer.render(scene, camera); }

animate();

API Summary

• CameraControl(camera, domElement): Constructor. Takes a THREE.js camera and the DOM element for event handling.
• rotate(horizontalAngle, verticalAngle): Rotates the camera around its target.
• zoom(amount): Zooms the camera in or out.
• pan(x, y): Pans the camera horizontally and vertically.
• setTarget(target): Sets the target point the camera orbits around. Accepts a THREE.Vector3.
• update(): Updates the camera's position and rotation based on accumulated changes. This method must be called in your animation loop.

License

MIT

This package is part of the 3d-camera-control ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/