{"_id":"3d-camera-control","name":"3d-camera-control","dist-tags":{"latest":"1768471.24.681"},"versions":{"1768471.24.681":{"name":"3d-camera-control","version":"1768471.24.681","description":"Professional integration for https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/","main":"index.js","type":"module","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["3d-camera-control","integration","sdk"],"author":{"name":"SuperMaker"},"license":"MIT","homepage":"https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/","gitHead":"0135527cfa7d676bfb9f936cc8552c14f7781810","_id":"3d-camera-control@1768471.24.681","_nodeVersion":"20.19.5","_npmVersion":"11.6.4","dist":{"integrity":"sha512-rAfSYcPt5Hv6Mc0o9AsGKgzrVne+bALL2umU3p/VRGBeEmCYw3xNwa+4aZmZFW9wV18tu1+j5TV3fjGx0S+yXA==","shasum":"f23fef353ae2ca8d17a08f76a7970087dfc26599","tarball":"https://registry.npmjs.org/3d-camera-control/-/3d-camera-control-1768471.24.681.tgz","fileCount":4,"unpackedSize":10145,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIT+QU9eebU2rJ2hzHf+lXti+7vvE4RNyxrnExc3Mp5gIhAOFk3zOlb4OZleE900Fzhr0Vyhno9LfF4kYvFvzrN1JS"}]},"_npmUser":{"name":"qy-upup","email":"qianyue2504@gmail.com"},"directories":{},"maintainers":[{"name":"qy-upup","email":"qianyue2504@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3d-camera-control_1768471.24.681_1768471109857_0.6053322259641098"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-15T09:58:29.793Z","1768471.24.681":"2026-01-15T09:58:29.994Z","modified":"2026-01-15T09:58:30.156Z"},"maintainers":[{"name":"qy-upup","email":"qianyue2504@gmail.com"}],"description":"Professional integration for https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/","homepage":"https://supermaker.ai/blog/qwen-image-multiple-angles-3d-camera-alibabas-breakthrough-in-ai-camera-control/","keywords":["3d-camera-control","integration","sdk"],"author":{"name":"SuperMaker"},"license":"MIT","readme":"# 3D Camera Control\n\nA 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.\n\n## Installation\n\nInstall the package using npm:\nbash\nnpm install 3d-camera-control\n\n## Usage Examples\n\nHere are several examples demonstrating how to use `3d-camera-control` in your JavaScript projects:\n\n**1. Basic Camera Orbit:**\n\nThis example demonstrates a simple orbit control around a target point.\njavascript\nimport { CameraControl } from '3d-camera-control';\n\n// Assuming you have a THREE.js camera and scene\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst scene = new THREE.Scene();\n\nconst control = new CameraControl(camera, scene.domElement);\n\ncontrol.rotate(0.5, 0); // Rotate horizontally by 0.5 radians\ncontrol.update(); // Update the camera based on the control state\n\n// Animation loop (e.g., using requestAnimationFrame)\nfunction animate() {\n  requestAnimationFrame(animate);\n  control.update();\n  renderer.render(scene, camera);\n}\n\nanimate();\n\n**2. Zooming with Mouse Wheel:**\n\nThis example shows how to implement zoom functionality using mouse wheel events.\njavascript\nimport { CameraControl } from '3d-camera-control';\n\n// Assuming you have a THREE.js camera and scene\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst scene = new THREE.Scene();\n\nconst control = new CameraControl(camera, scene.domElement);\n\nscene.domElement.addEventListener('wheel', (event) => {\n  const delta = Math.sign(event.deltaY);\n  control.zoom(delta * 0.1); // Zoom by a factor of 0.1, adjusted by wheel direction\n  control.update();\n});\n\n// Animation loop (e.g., using requestAnimationFrame)\nfunction animate() {\n  requestAnimationFrame(animate);\n  control.update();\n  renderer.render(scene, camera);\n}\n\nanimate();\n\n**3. Panning with Mouse Drag:**\n\nThis example demonstrates how to pan the camera using mouse drag.\njavascript\nimport { CameraControl } from '3d-camera-control';\n\n// Assuming you have a THREE.js camera and scene\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst scene = new THREE.Scene();\n\nconst control = new CameraControl(camera, scene.domElement);\n\nlet isDragging = false;\nlet previousMousePosition = { x: 0, y: 0 };\n\nscene.domElement.addEventListener('mousedown', (event) => {\n  isDragging = true;\n  previousMousePosition = { x: event.clientX, y: event.clientY };\n});\n\nscene.domElement.addEventListener('mouseup', () => {\n  isDragging = false;\n});\n\nscene.domElement.addEventListener('mousemove', (event) => {\n  if (isDragging) {\n    const deltaX = event.clientX - previousMousePosition.x;\n    const deltaY = event.clientY - previousMousePosition.y;\n\n    control.pan(deltaX * 0.01, deltaY * 0.01); // Pan based on mouse movement\n    control.update();\n\n    previousMousePosition = { x: event.clientX, y: event.clientY };\n  }\n});\n\n// Animation loop (e.g., using requestAnimationFrame)\nfunction animate() {\n  requestAnimationFrame(animate);\n  control.update();\n  renderer.render(scene, camera);\n}\n\nanimate();\n\n**4. Setting Target:**\n\nThis example shows how to set the target that the camera orbits around.\njavascript\nimport { CameraControl } from '3d-camera-control';\nimport * as THREE from 'three';\n\n// Assuming you have a THREE.js camera and scene\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst scene = new THREE.Scene();\n\nconst target = new THREE.Vector3(0, 0, 0); // Define a target point\nconst control = new CameraControl(camera, scene.domElement);\ncontrol.setTarget(target);\ncontrol.update();\n\n// Animation loop (e.g., using requestAnimationFrame)\nfunction animate() {\n  requestAnimationFrame(animate);\n  control.update();\n  renderer.render(scene, camera);\n}\n\nanimate();\n\n## API Summary\n\n*   **`CameraControl(camera, domElement)`**: Constructor. Takes a THREE.js camera and the DOM element for event handling.\n*   **`rotate(horizontalAngle, verticalAngle)`**: Rotates the camera around its target.\n*   **`zoom(amount)`**: Zooms the camera in or out.\n*   **`pan(x, y)`**: Pans the camera horizontally and vertically.\n*   **`setTarget(target)`**: Sets the target point the camera orbits around. Accepts a THREE.Vector3.\n*   **`update()`**: Updates the camera's position and rotation based on accumulated changes.  This method must be called in your animation loop.\n\n## License\n\nMIT\n\nThis 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/","readmeFilename":"README.md","_rev":"1-0f041e54c6716fcb7326e584f4a3ad42"}