threejs-interaction

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 
// Camera controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
 
// Raycasting for click detection
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
 
function onClick(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
 
  if (intersects.length > 0) {
    console.log("Clicked:", intersects[0].object);
  }
}
 
window.addEventListener("click", onClick);

const raycaster = new THREE.Raycaster();
 
// From camera (mouse picking)
raycaster.setFromCamera(mousePosition, camera);
 
// From any origin and direction
raycaster.set(origin, direction); // origin: Vector3, direction: normalized Vector3
 
// Get intersections
const intersects = raycaster.

const mouse = new THREE.Vector2();
 
function updateMouse(event) {
  // For full window
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2

function onTouchStart(event) {
  event.preventDefault();
 
  if (event.touches.length === 1) {
    const touch = event.touches[0];
    mouse.x = (touch.clientX / window.innerWidth) * 2 - 1;
    mouse.y 

const raycaster = new THREE.Raycaster();
 
// Near/far clipping (default: 0, Infinity)
raycaster.near = 0;
raycaster.far = 100;
 
// Line/Points precision
raycaster.params.Line.threshold = 0.1;
raycaster.params.Points.threshold = 0.1;
 
// Layers (only intersect objects on specific layers)
raycaster.layers.set(

// Only check specific objects
const clickables = [mesh1, mesh2, mesh3];
const intersects = raycaster.intersectObjects(clickables, false);
 
// Use layers for filtering
mesh1.layers.set(1); // Clickable layer
raycaster.layers.set(1);
 
// Throttle raycast for hover effects
let lastRaycast =

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 
const controls = new OrbitControls(camera, renderer.domElement);
 
// Damping (smooth movement)
controls.enableDamping = true;
controls.dampingFactor = 0.05;
 
// Rotation limits
controls.minPolarAngle 

import { FlyControls } from "three/addons/controls/FlyControls.js";
 
const controls = new FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;
 
// Update with delta
function animate() {
  controls.

import { FirstPersonControls } from "three/addons/controls/FirstPersonControls.js";
 
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = Math.

import { PointerLockControls } from "three/addons/controls/PointerLockControls.js";
 
const controls = new PointerLockControls(camera, document.body);
 
// Lock pointer on click
document.addEventListener("click", () => {
  controls.lock();

import { TrackballControls } from "three/addons/controls/TrackballControls.js";
 
const controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.staticMoving = true;
 
function animate() {
  controls.

import { MapControls } from "three/addons/controls/MapControls.js";
 
const controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;

import { TransformControls } from "three/addons/controls/TransformControls.js";
 
const transformControls = new TransformControls(camera, renderer.domElement);
scene.add(transformControls);
 
// Attach to object
transformControls.attach(selectedMesh);
 
// Switch modes

import { DragControls } from "three/addons/controls/DragControls.js";
 
const draggableObjects = [mesh1, mesh2, mesh3];
const dragControls = new DragControls(
  draggableObjects,
  camera,
  renderer.domElement,
);
 
dragControls.addEventListener("dragstart", (event) =>

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let selectedObject = null;
 
function onMouseDown(event) {
  mouse.x = (event.clientX /

import { SelectionBox } from "three/addons/interactive/SelectionBox.js";
import { SelectionHelper } from "three/addons/interactive/SelectionHelper.js";
 
const selectionBox = new SelectionBox(camera, scene);
const selectionHelper = new SelectionHelper(renderer, 

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let hoveredObject = null;
 
function onMouseMove(event) {

const keys = {};
 
document.addEventListener("keydown", (event) => {
  keys[event.code] = true;
});
 
document.addEventListener("keyup", (event) => {
  keys[event.code] = false;

function worldToScreen(position, camera) {
  const vector = position.clone();
  vector.project(camera);
 
  return {
    x: ((vector.x + 1) / 2) * window.innerWidth,
    y: (-(vector.y - 1) 

function screenToWorld(screenX, screenY, camera, targetZ = 0) {
  const vector = new THREE.Vector3(
    (screenX / window.innerWidth) * 2 - 1,
    -(screenY / window.innerHeight) *

function getRayPlaneIntersection(mouse, camera, plane) {
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
 
  const intersection = new THREE.Vector3();
  raycaster.ray.intersectPlane(plane, intersection);
 

class InteractionManager {
  constructor(camera, renderer, scene) {
    this.camera = camera;
    this.renderer 

// Use simpler geometry for raycasting
const complexMesh = loadedModel;
const collisionMesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ visible: false }),
);
collisionMesh.userData.target =