drinkspiller / threex-esm

An ES6/ESM port of a few threex modules. Based off of Jerome Etienne's threex project.

threex-esm

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.

Installation

  npm install git+https://github.com/drinkspiller/threex-esm.git

DomEvents Usage

(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);
}

Dynamic Texture Usage

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

Demo

To run the demo in this package:

1. Clone this repo
2. cd into repo root
3. Install with npm install
4. Run demo server with npm run demo
5. Open http://localhost:1234 + browser Dev Tools.
6. Use mouse to interact with green cube — interaction messages are logged to Dev Tools' console