repository·master·Indexed 19 days ago
https://github.com/jasonchen1982/three.interaction.jsA full-interaction event manager for Three.js designed to simplify binding mouse and touch interaction events to 3D objects. It provides an InteractionManager to coordinate events, InteractionLayer for organizing interaction groups, and an Interaction class to define specific logic. Supported events include click, mousedown, mouseup, mousemove, mouseover, mouseout, touchstart, touchend, touchmove, and touchcancel.
Draco decoders are provided in two distinct variations depending on your target use case:
Events in three.interaction bubble up through the display tree. You can listen for events on parent nodes (like the Scene) to catch events triggered by child objects.
To prevent an event from reaching parent nodes, call ev.stopPropagation() within the event handler.
// Listen on the scene to catch bubbled events from children
scene.on('touchstart', ev => {
console.log('Touch event bubbled to scene:', ev);
});
// Example of stopping propagation on a specific object
cube.on('click', ev => {
console.log('Cube clicked, stopping bubble');
ev.stopPropagation();
});Install the three.interaction package as a dependency using npm.
npm install -S three.interactionTo use three.interaction, create a new instance of the Interaction class. You must provide the WebGLRenderer, the Scene, and the PerspectiveCamera used in your Three.js setup. Once initialized, the manager enables event binding for your 3D objects.
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
import { Interaction } from 'three.interaction';
const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
// Initialize the interaction manager
const interaction = new Interaction(renderer, scene, camera);You can include three.js in your project using one of the following methods:
three.min.js) and include it in your HTML.<script src="js/three.min.js"></script>To use Draco compression in a Three.js project, you must provide the path to the Draco decoder files and optionally configure the decoder type. The decoder files can be the default builds or glTF-specific builds.
Available files in the decoder directory typically include:
draco_decoder.js: Emscripten-compiled decoder (compatible with all modern browsers).draco_decoder.wasm: WebAssembly decoder (compatible with newer browsers/devices).draco_wasm_wrapper.js: JavaScript wrapper for the WASM decoder.Use setDecoderPath to point to the directory containing these files and setDecoderConfig if you need to manually override WASM support detection.
// 1. Set the path to the folder containing the decoder files
THREE.DRACOLoader.setDecoderPath('path/to/decoders/');
// 2. (Optional) Override detection of WASM support
// Use {type: 'js'} to force the JS decoder if WASM is not desired
THREE.DRACOLoader.setDecoderConfig({type: 'js'});
// 3. Initialize the loader
var dracoLoader = new THREE.DRACOLoader();To use custom fonts in Three.js (specifically for TextGeometry), you must convert font files into the typeface.json format. You can use Facetype.js to perform this conversion.
.ttf)..json file.FontLoader in your Three.js project.http://gero3.github.io/facetype.js/To render a basic 3D scene, you need to initialize a camera, a scene, a geometry/material combination (a mesh), and a renderer. The renderer's domElement is then appended to the document to display the viewport. An animation loop using requestAnimationFrame is used to update object properties (like rotation) and re-render the scene continuously.
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}You can attach event listeners directly to Three.js objects (like Mesh) using the .on(eventName, callback) method.
To change the cursor style when hovering over an object, set the .cursor property on that object.
Supported event names include:
click, mousedown, mouseup, mousemove, mouseover, mouseouttouchstart, touchend, touchmove, touchcancelconst cube = new Mesh(
new BoxGeometry(1, 1, 1),
new MeshBasicMaterial({ color: 0xffffff }),
);
scene.add(cube);
// Set cursor style
cube.cursor = 'pointer';
// Attach event listeners
cube.on('click', function(ev) {
console.log('Cube clicked');
});
cube.on('mousemove', function(ev) {
// Handle mouse movement
});The InteractionManager is the primary entrypoint for managing 3D interaction events within a Three.js scene. It coordinates how interactions are processed and distributed across different layers.
import { InteractionManager } from 'three.interaction';
// Initialize the manager (usage depends on internal implementation)
const manager = new InteractionManager();The InteractionLayer allows you to group specific objects or sets of interactions together. This is useful for managing different interaction contexts (e.g., UI vs. World objects) within the same scene.
import { InteractionLayer } from 'three.interaction';
const layer = new InteractionLayer();The Interaction class represents a specific interaction instance or definition, allowing you to define how specific events (like clicks or drags) behave on 3D objects.
import { Interaction } from 'three.interaction';
const interaction = new Interaction();