jasonChen1982 / Three.interaction.js
three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom
Stars: ✭ 206
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Three.interaction.js
Threejs Path Flow
🐬🐟 ↶Mesh Deformation / Bending / Following on a Curve
Stars: ✭ 165 (-19.9%)
Mutual labels: threejs
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (-14.56%)
Mutual labels: threejs
React Three Next
React Three Fiber, Nextjs, Tailwind starter
Stars: ✭ 195 (-5.34%)
Mutual labels: threejs
Threejs Modern App
Boilerplate and utils for a fullscreen Three.js app
Stars: ✭ 176 (-14.56%)
Mutual labels: threejs
Ar.js
Image tracking, Location Based AR, Marker tracking. All on the Web.
Stars: ✭ 3,048 (+1379.61%)
Mutual labels: threejs
Vue Displacement Slideshow
A Vue.js 2.0 slideshow component working with Three.js
Stars: ✭ 165 (-19.9%)
Mutual labels: threejs
Three Nebula
WebGL based particle system engine for three.js
Stars: ✭ 192 (-6.8%)
Mutual labels: threejs
Encom Boardroom
📈 Web tribute to the Tron: Legacy Boardroom Scene
Stars: ✭ 2,094 (+916.5%)
Mutual labels: threejs
React Globe
Create beautiful and interactive React + ThreeJS globe visualizations with ease.
Stars: ✭ 167 (-18.93%)
Mutual labels: threejs
Droneworld
droneWorld: a 3D world map and a three.js playground
Stars: ✭ 197 (-4.37%)
Mutual labels: threejs
Threejs Sandbox
Set of experiments and extensions to THREE.js.
Stars: ✭ 163 (-20.87%)
Mutual labels: threejs
Three Projected Material
📽 Three.js Material which lets you do Texture Projection on a 3d Model
Stars: ✭ 177 (-14.08%)
Mutual labels: threejs
Magicshader
🔮 Tiny helper for three.js to debug and write shaders
Stars: ✭ 205 (-0.49%)
Mutual labels: threejs
Node Occ
build BREP Solids with OpenCascade and NodeJS - 3D Modeling
Stars: ✭ 202 (-1.94%)
Mutual labels: threejs
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+6418.45%)
Mutual labels: threejs
three.interaction
a full-interaction event manager, help three.js
binding interaction event more simple
install
npm install -S three.interaction
usage
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
Examples
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].