0.18.0 • Published 18 days ago
@masatomakino/threejs-interactive-object v0.18.0
threejs-interactive-object
Mouse interactive objects for three.js
Demo
Getting Started
Install
npm install @masatomakino/threejs-interactive-object --save-dev
Import
threejs-interactive-object is composed of ES6 modules and TypeScript d.ts files.
At first, import classes.
import {
ClickableMesh,
StateMaterialSet,
StateMaterial,
MouseEventManager,
ThreeMouseEvent,
ThreeMouseEventType,
} from "@masatomakino/threejs-interactive-object";
Create buttons
init MouseEventManager
MouseEventManager class watch MouseEvent on canvas element.
initialize MouseEventManager before create a button.
const manager = new MouseEventManager(scene, camera, renderer);
Init button
Create buttons and add to scene.
const clickable = new ClickableMesh({
geo: new BoxBufferGeometry(3, 3, 3),
material: new StateMaterialSet({
normal: new MeshBasicMaterial({
color: 0xffffff,
}),
}),
});
scene.add(clickable);
Add event listener.
clickable.model.on("click", (e) => {
console.log("CLICKED!");
});
Convert Mesh to Interactive
MouseEventManager identifies an Object3D instance with a member named model
as interactive. If you want to convert your loaded model to interactive, add a model
member.
mesh["model"] = new ClickableObject({ view: mesh });
Uninstall
npm uninstall @masatomakino/threejs-interactive-object --save-dev
License
threejs-interactive-object is MIT licensed.