threejs-interactive-object

Mouse interactive objects for three.js

Demo

Demo Page

Getting Started

Install

npm install @masatomakino/threejs-interactive-object --save-dev
Copy

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";
Copy

Create buttons

API documents

init MouseEventManager

MouseEventManager class watch MouseEvent on canvas element.

initialize MouseEventManager before create a button.

const manager = new MouseEventManager(scene, camera, renderer);
Copy

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);
Copy

Add event listener.

clickable.model.on("click", (e) => {
  console.log("CLICKED!");
});
Copy

Convert Mesh to Interactive

The MouseEventManager identifies an Object3D instance with a member named interactionHandler as interactive. If you want to convert your loaded model to be interactive, you can use the convertToClickableMesh, convertToCheckboxMesh, convertToRadioButtonMesh function.

const interactiveMesh = convertToClickableMesh(mesh);
Copy

Uninstall

npm uninstall @masatomakino/threejs-interactive-object --save-dev
Copy

License

threejs-interactive-object is MIT licensed.