An ES6/ESM port of a few threex modules. Ported from Jerome Etienne's threex project:
- https://github.com/jeromeetienne/threex.domevents2
- https://github.com/jeromeetienne/threex.dynamictexture
Source code is vanilla JS. Typescipt types are autogenerated with tsc.
npm install git+https://github.com/drinkspiller/threex-esm.git
(Also see working example in demo/ts/app.ts)
import DomEvents from 'threex-esm/src/threex.domevents';
import MousePointer from 'threex-esm/src/threex.domevents.mousepointer';
// Assumes basic THREE.js camera/scene/renderer setup.
const geometry: THREE.BufferGeometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const threeXDomEvents: DomEvents = new DomEvents();
const threeXMousePointer = new MousePointer(
camera, renderer.domElement, threeXDomEvents);
threeXDomEvents.addEventListener(
cube, 'mousedown', handleMouseEvent, false);
threeXDomEvents.addEventListener(
cube, 'mouseup', handleMouseEvent, false);
threeXDomEvents.addEventListener(
cube, 'click', handleMouseEvent, false);
threeXDomEvents.addEventListener(
cube, 'mousemove', handleMouseEvent, false);
threeXDomEvents.addEventListener(
cube, 'mouseenter', handleMouseEvent, false);
threeXDomEvents.addEventListener(
cube, 'mouseleave', handleMouseEvent, false);
function handleMouseEvent(event) {
console.log('received', event.type);
}
(Also see working example in demo/ts/app.ts)
// Assumes basic THREE.js camera/scene/renderer setup.
import DynamicTexture from 'threex-esm/src/threex.dynamictexture';
const dynamicTexture = new DynamicTexture(512, 512);
dynamicTexture.context.font = 'bolder 80px Verdana';
dynamicTexture.texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
dynamicTexture.clear('#0f0').drawText('Boop', undefined, 256, '#f00');
const geometry: THREE.BufferGeometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
map: dynamicTexture.texture,
});
const cube = new THREE.Mesh(geometry, material);
cube.name = 'Green Cube';
scene.add(cube);
// In render loop..
const now = new Date();
dynamicTexture.clear('#0f0').drawText(
`${now.getHours()}:${now.getHours()}:${zeropad(now.getSeconds())}`,
undefined, 256, '#f00');
renderer.render(scene, camera);
To run the demo in this package:
- Clone this repo
cd
into repo root- Install with
npm install
- Run demo server with
npm run demo
- Open http://localhost:1234 + browser Dev Tools.
- Use mouse to interact with green cube — interaction messages are logged to Dev Tools' console