npm package: 3d-camera-control
Description: Professional integration for https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/
Author: SuperMaker
Latest version: 1768471.24.681

# 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/