@pmndrs/handle
Version:
framework agnostic expandable handle implementation for threejs
43 lines (42 loc) • 1.69 kB
JavaScript
import { MeshBasicMaterial, Mesh, BoxGeometry } from 'three';
import { handleXRayMaterialProperties, setupHandlesContextHoverMaterial } from '../material.js';
import { RegisteredHandle } from '../registered.js';
import { extractHandleTransformOptions } from '../utils.js';
export class PlaneScaleHandle extends RegisteredHandle {
constructor(context, tag, tagPrefix = '') {
super(context, tag, tagPrefix, () => ({
translate: 'as-scale',
scale: this.options,
rotate: false,
multitouch: false,
}));
}
bind(defaultColor, defaultHoverColor, config) {
const { options, disabled } = extractHandleTransformOptions(this.axis, config);
if (options === false) {
return undefined;
}
this.options = options;
const material = new MeshBasicMaterial(handleXRayMaterialProperties);
const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
opacity: 0.5,
hoverOpacity: 1,
color: defaultColor,
hoverColor: defaultHoverColor,
disabled,
});
const mesh = new Mesh(new BoxGeometry(0.2, 0.2, 0.01), material);
mesh.renderOrder = Infinity;
mesh.pointerEventsOrder = Infinity;
mesh.position.set(0.15, 0.15, 0);
const unregister = disabled ? undefined : this.context.registerHandle(this.store, mesh, this.tag);
this.add(mesh);
return () => {
material.dispose();
mesh.geometry.dispose();
unregister?.();
cleanupHover?.();
this.remove(mesh);
};
}
}