https://github.com/jasonchen1982/three.interaction.js

three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom
https://github.com/jasonchen1982/three.interaction.js

event-system eventer interaction threejs

Last synced: 3 months ago
JSON representation

three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom

• Host: GitHub
• URL: https://github.com/jasonchen1982/three.interaction.js
• Owner: jasonChen1982
• Created: 2017-11-24T07:50:09.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-11-06T01:18:08.000Z (over 1 year ago)
• Last Synced: 2025-04-12T14:57:33.881Z (3 months ago)
• Topics: event-system, eventer, interaction, threejs
• Language: JavaScript
• Homepage:
• Size: 4.22 MB
• Stars: 413
• Watchers: 14
• Forks: 73
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# three.interaction

[![npm](https://img.shields.io/npm/v/three.interaction.svg?style=flat-square)](https://github.com/jasonChen1982/three.interaction.js)

[![javascript style guide](https://img.shields.io/badge/code_style-google-brightgreen.svg)](https://google.github.io/styleguide/jsguide.html)

[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)

a full-interaction event manager, help `three.js` binding interaction event more simple

# install

```sh

npm install -S three.interaction

```

# usage

```javascript

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } 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);

// new a interaction, then you can add interaction-event with your free style

const interaction = new Interaction(renderer, scene, camera);

const cube = new Mesh(

  new BoxGeometry(1, 1, 1),

  new MeshBasicMaterial({ color: 0xffffff }),

);

scene.add(cube);

cube.cursor = 'pointer';

cube.on('click', function(ev) {});

cube.on('touchstart', function(ev) {});

cube.on('touchcancel', function(ev) {});

cube.on('touchmove', function(ev) {});

cube.on('touchend', function(ev) {});

cube.on('mousedown', function(ev) {});

cube.on('mouseout', function(ev) {});

cube.on('mouseover', function(ev) {});

cube.on('mousemove', function(ev) {});

cube.on('mouseup', function(ev) {});

// and so on ...

/**

 * you can also listen on parent-node or any display-tree node,

 * source event will bubble up along with display-tree.

 * you can stop the bubble-up by invoke ev.stopPropagation function.

 */

scene.on('touchstart', ev => {

  console.log(ev);

})

scene.on('touchmove', ev => {

  console.log(ev);

})

```

## Documentation

[documentation][documentation]

## Examples

[examples cube][examples]

[examples cube overlap][examples-overlap]

[documentation]:https://jasonchen1982.github.io/three.interaction.js/docs/ "three.interaction documention page"

[examples]:https://jasonchen1982.github.io/three.interaction.js/examples/interaction/ "three.interaction examples page"

[examples-overlap]:https://jasonchen1982.github.io/three.interaction.js/examples/interaction-overlap/ "three.interaction examples page with overlap"