UNPKG

playcanvas

Version:

PlayCanvas WebGL game engine

223 lines (222 loc) 5.29 kB
/** * The TranslateGizmo provides interactive 3D manipulation handles for translating/moving * {@link Entity}s in a {@link Scene}. It creates a visual widget with arrows along the X, Y * and Z axes, planes at their intersections, and a center sphere, allowing precise control over * object positioning through direct manipulation. The gizmo's visual appearance can be customized * away from the defaults as required. * * Note that the gizmo can be driven by both mouse+keyboard and touch input. * * ```javascript * // Create a layer for rendering all gizmos * const gizmoLayer = pc.Gizmo.createLayer(app); * * // Create a translate gizmo * const gizmo = new pc.TranslateGizmo(cameraComponent, gizmoLayer); * * // Create an entity to attach the gizmo to * const entity = new pc.Entity(); * entity.addComponent('render', { * type: 'box' * }); * app.root.addChild(entity); * * // Attach the gizmo to the entity * gizmo.attach([entity]); * ``` * * Relevant Engine API examples: * * - [Translate Gizmo](https://playcanvas.github.io/#/gizmos/transform-translate) * - [Editor](https://playcanvas.github.io/#/misc/editor) * * @category Gizmo */ export class TranslateGizmo extends TransformGizmo { _shapes: { face: SphereShape; yz: PlaneShape; xz: PlaneShape; xy: PlaneShape; x: ArrowShape; y: ArrowShape; z: ArrowShape; }; /** * Internal mapping from each attached node to their starting position in local space. * * @type {Map<GraphNode, Vec3>} * @private */ private _nodeLocalPositions; /** * Internal mapping from each attached node to their starting position in world space. * * @type {Map<GraphNode, Vec3>} * @private */ private _nodePositions; /** * Flips the planes to face the camera. * * @type {boolean} */ flipShapes: boolean; /** * Sets the axis gap. * * @type {number} */ set axisGap(value: number); /** * Gets the axis gap. * * @type {number} */ get axisGap(): number; /** * Sets the axis line thickness. * * @type {number} */ set axisLineThickness(value: number); /** * Gets the axis line thickness. * * @type {number} */ get axisLineThickness(): number; /** * Sets the axis line length. * * @type {number} */ set axisLineLength(value: number); /** * Gets the axis line length. * * @type {number} */ get axisLineLength(): number; /** * Sets the axis line tolerance. * * @type {number} */ set axisLineTolerance(value: number); /** * Gets the axis line tolerance. * * @type {number} */ get axisLineTolerance(): number; /** * Sets the arrow thickness. * * @type {number} */ set axisArrowThickness(value: number); /** * Gets the arrow thickness. * * @type {number} */ get axisArrowThickness(): number; /** * Sets the arrow length. * * @type {number} */ set axisArrowLength(value: number); /** * Gets the arrow length. * * @type {number} */ get axisArrowLength(): number; /** * Sets the plane size. * * @type {number} */ set axisPlaneSize(value: number); /** * Gets the plane size. * * @type {number} */ get axisPlaneSize(): number; /** * Sets the plane gap. * * @type {number} */ set axisPlaneGap(value: number); /** * Gets the plane gap. * * @type {number} */ get axisPlaneGap(): number; /** * Sets the axis center size. * * @type {number} */ set axisCenterSize(value: number); /** * Gets the axis center size. * * @type {number} */ get axisCenterSize(): number; /** * Sets the axis center tolerance. * * @type {number} */ set axisCenterTolerance(value: number); /** * Gets the axis center tolerance. * * @type {number} */ get axisCenterTolerance(): number; /** * @param {string} prop - The property to set. * @param {any} value - The value to set. * @private */ private _setArrowProp; /** * @param {string} prop - The property to set. * @param {any} value - The value to set. * @private */ private _setPlaneProp; /** * @private */ private _shapesLookAtCamera; /** * @private */ private _storeNodePositions; /** * @param {Vec3} pointDelta - The delta to apply to the node positions. * @private */ private _setNodePositions; /** * @param {number} x - The x coordinate. * @param {number} y - The y coordinate. * @returns {Vec3} The point in world space. * @protected */ protected _screenToPoint(x: number, y: number): Vec3; } import { TransformGizmo } from './transform-gizmo.js'; import { SphereShape } from './shape/sphere-shape.js'; import { PlaneShape } from './shape/plane-shape.js'; import { ArrowShape } from './shape/arrow-shape.js'; import { Vec3 } from '../../core/math/vec3.js';