threejs-interaction
Mouse and touch input handling, raycasting, camera controls, and object selection for Three.js scenes.
- Supports five camera control types: OrbitControls (orbit around target), FlyControls (free flight), FirstPersonControls (WASD movement), PointerLockControls (locked pointer FPS), and MapControls (2D map-style panning)
- Raycasting enables click detection, hover effects, and object selection with detailed intersection data including distance, UV coordinates, and face information
- Includes TransformControls for interactive gizmos (translate/rotate/scale), DragControls for direct object dragging, and SelectionBox for multi-object selection
- Provides coordinate conversion utilities between world and screen space, ray-plane intersection, and keyboard input handling with throttling and layer-based filtering for performance
Three.js Interaction
Quick Start
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;
More from cloudai-x/threejs-skills
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
5.3Kthreejs-fundamentals
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
4.3Kthreejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
3.6Kthreejs-geometry
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
3.5Kthreejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
3.2Kthreejs-postprocessing
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
2.9K