import { PerspectiveCamera } from "three"; import { SpatialControls } from "spatial-controls"; const camera = new PerspectiveCamera(...); const { position, quaternion } = camera; const domElement = document.getElementById("viewport"); const controls = new SpatialControls(position, quaternion, domElement); requestAnimationFrame(function render(timestamp) { requestAnimationFrame(render); controls.update(timestamp); });

// Sets or replaces the position vector. controls.position.set(x, y, z); controls.position = otherPosition; // Sets or replaces the target vector. controls.target.set(x, y, z); controls.target = otherTarget; // Adjusts the target and the quaternion. controls.lookAt(x, y, z); controls.lookAt(target);

import { Action, ControlMode, Input, PointerButton } from "spatial-controls"; const settings = controls.settings; settings.general.mode = ControlMode.THIRD_PERSON; settings.rotation.sensitivity = 2.2; settings.rotation.damping = 0.05; settings.translation.sensitivity = 0.25; settings.translation.damping = 0.1; settings.zoom.setRange(0.25, 3.0); settings.zoom.damping = 0.1; const keyBindings = settings.keyBindings; keyBindings.set("KeyR", Action.ROTATE); keyBindings.delete("KeyX"); // Input bindings also support modifiers. keyBindings.set(new Input<KeyCode>("Space", { modifiers: ["Ctrl"] }), Action.MOVE_DOWN); const pointerBindings = settings.pointerBindings; pointerBindings.delete(PointerButton.MAIN); pointerBindings.set(PointerButton.SECONDARY, Action.ROTATE); // The context menu can be disabled like this: document.body.addEventListener("contextmenu", e => e.preventDefault());

// JSON round-trip. const json = JSON.stringify(settings); settings.fromJSON(json); // Via local storage. localStorage.setItem("spatial-controls", JSON.stringify(settings)); settings.fromJSON(localStorage.getItem("spatial-controls")); // Save as JSON file. const settingsURL = URL.createObjectURL(settings.toBlob()); const a = document.createElement("a"); a.setAttribute("href", settingsURL); a.setAttribute("download", "spatial-controls.json"); a.click(); URL.revokeObjectURL(settingsURL); // Load from JSON file. fetch("./spatial-controls.json") .then(response => response.text()) .then(data => settings.fromJSON(data)) .catch(e => console.error(e));

const box = new Box3(); box.min.set(-1, -1, -1); box.max.set(1, 1, 1); const boxConstraint = (p: Vector3) => box.clampPoint(p, p); controls.constraints.add(boxConstraint); controls.constraints.delete(boxConstraint);