|
|
@@ -86856,6 +86856,148 @@ var BABYLON;
|
|
|
var BABYLON;
|
|
|
(function (BABYLON) {
|
|
|
/**
|
|
|
+ * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
|
|
|
+ */
|
|
|
+ var Gizmo = /** @class */ (function () {
|
|
|
+ /**
|
|
|
+ * Creates a gizmo
|
|
|
+ * @param gizmoLayer The utility layer the gizmo will be added to
|
|
|
+ */
|
|
|
+ function Gizmo(/** The utility layer the gizmo will be added to */ gizmoLayer) {
|
|
|
+ var _this = this;
|
|
|
+ this.gizmoLayer = gizmoLayer;
|
|
|
+ this._rootMesh = new BABYLON.Mesh("gizmoRootNode", gizmoLayer.utilityLayerScene);
|
|
|
+ this._beforeRenderObserver = this.gizmoLayer.utilityLayerScene.onBeforeRenderObservable.add(function () {
|
|
|
+ if (_this.gizmoLayer.utilityLayerScene.activeCamera && _this.attachedMesh) {
|
|
|
+ var dist = _this.attachedMesh.position.subtract(_this.gizmoLayer.utilityLayerScene.activeCamera.position).length() / 5;
|
|
|
+ _this._rootMesh.scaling.set(dist, dist, dist);
|
|
|
+ }
|
|
|
+ if (_this.attachedMesh) {
|
|
|
+ _this._rootMesh.position.copyFrom(_this.attachedMesh.position);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * Disposes of the gizmo
|
|
|
+ */
|
|
|
+ Gizmo.prototype.dispose = function () {
|
|
|
+ this._rootMesh.dispose();
|
|
|
+ if (this._beforeRenderObserver) {
|
|
|
+ this.gizmoLayer.utilityLayerScene.onBeforeRenderObservable.remove(this._beforeRenderObserver);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return Gizmo;
|
|
|
+ }());
|
|
|
+ BABYLON.Gizmo = Gizmo;
|
|
|
+})(BABYLON || (BABYLON = {}));
|
|
|
+
|
|
|
+//# sourceMappingURL=babylon.gizmo.js.map
|
|
|
+
|
|
|
+
|
|
|
+var BABYLON;
|
|
|
+(function (BABYLON) {
|
|
|
+ /**
|
|
|
+ * Single axis drag gizmo
|
|
|
+ */
|
|
|
+ var AxisDragGizmo = /** @class */ (function (_super) {
|
|
|
+ __extends(AxisDragGizmo, _super);
|
|
|
+ /**
|
|
|
+ * Creates an AxisDragGizmo
|
|
|
+ * @param gizmoLayer The utility layer the gizmo will be added to
|
|
|
+ * @param dragAxis The axis which the gizmo will be able to drag on
|
|
|
+ * @param color The color of the gizmo
|
|
|
+ */
|
|
|
+ function AxisDragGizmo(gizmoLayer, dragAxis, color) {
|
|
|
+ var _this = _super.call(this, gizmoLayer) || this;
|
|
|
+ // Create Material
|
|
|
+ var coloredMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
|
|
|
+ coloredMaterial.disableLighting = true;
|
|
|
+ coloredMaterial.emissiveColor = color;
|
|
|
+ // Build mesh on root node
|
|
|
+ var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", { diameterTop: 0, height: 2, tessellation: 96 }, gizmoLayer.utilityLayerScene);
|
|
|
+ var arrowTail = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", { diameter: 0.03, height: 0.2, tessellation: 96 }, gizmoLayer.utilityLayerScene);
|
|
|
+ _this._rootMesh.addChild(arrowMesh);
|
|
|
+ _this._rootMesh.addChild(arrowTail);
|
|
|
+ // Position arrow pointing in its drag axis
|
|
|
+ arrowMesh.scaling.scaleInPlace(0.1);
|
|
|
+ arrowMesh.material = coloredMaterial;
|
|
|
+ arrowMesh.rotation.x = Math.PI / 2;
|
|
|
+ arrowMesh.position.z += 0.3;
|
|
|
+ arrowTail.rotation.x = Math.PI / 2;
|
|
|
+ arrowTail.material = coloredMaterial;
|
|
|
+ arrowTail.position.z += 0.2;
|
|
|
+ _this._rootMesh.lookAt(_this._rootMesh.position.subtract(dragAxis));
|
|
|
+ // Add drag behavior to handle events when the gizmo is dragged
|
|
|
+ _this._dragBehavior = new BABYLON.PointerDragBehavior({ dragAxis: dragAxis, pointerObservableScene: gizmoLayer.originalScene });
|
|
|
+ _this._dragBehavior.moveAttached = false;
|
|
|
+ _this._rootMesh.addBehavior(_this._dragBehavior);
|
|
|
+ _this._dragBehavior.onDragObservable.add(function (event) {
|
|
|
+ if (_this.attachedMesh) {
|
|
|
+ _this.attachedMesh.position.addInPlace(event.delta);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return _this;
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * Disposes of the gizmo
|
|
|
+ */
|
|
|
+ AxisDragGizmo.prototype.dispose = function () {
|
|
|
+ this._dragBehavior.detach();
|
|
|
+ _super.prototype.dispose.call(this);
|
|
|
+ };
|
|
|
+ return AxisDragGizmo;
|
|
|
+ }(BABYLON.Gizmo));
|
|
|
+ BABYLON.AxisDragGizmo = AxisDragGizmo;
|
|
|
+})(BABYLON || (BABYLON = {}));
|
|
|
+
|
|
|
+//# sourceMappingURL=babylon.axisDragGizmo.js.map
|
|
|
+
|
|
|
+
|
|
|
+var BABYLON;
|
|
|
+(function (BABYLON) {
|
|
|
+ /**
|
|
|
+ * Gizmo that enables dragging a mesh along 3 axis
|
|
|
+ */
|
|
|
+ var PositionGizmo = /** @class */ (function (_super) {
|
|
|
+ __extends(PositionGizmo, _super);
|
|
|
+ /**
|
|
|
+ * Creates a PositionGizmo
|
|
|
+ * @param gizmoLayer The utility layer the gizmo will be added to
|
|
|
+ */
|
|
|
+ function PositionGizmo(gizmoLayer) {
|
|
|
+ var _this = _super.call(this, gizmoLayer) || this;
|
|
|
+ _this._xDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.FromHexString("#00b894"));
|
|
|
+ _this._yDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.FromHexString("#d63031"));
|
|
|
+ _this._zDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.FromHexString("#0984e3"));
|
|
|
+ return _this;
|
|
|
+ }
|
|
|
+ Object.defineProperty(PositionGizmo.prototype, "attachedMesh", {
|
|
|
+ set: function (mesh) {
|
|
|
+ this._xDrag.attachedMesh = mesh;
|
|
|
+ this._yDrag.attachedMesh = mesh;
|
|
|
+ this._zDrag.attachedMesh = mesh;
|
|
|
+ },
|
|
|
+ enumerable: true,
|
|
|
+ configurable: true
|
|
|
+ });
|
|
|
+ /**
|
|
|
+ * Disposes of the gizmo
|
|
|
+ */
|
|
|
+ PositionGizmo.prototype.dispose = function () {
|
|
|
+ this._xDrag.dispose();
|
|
|
+ this._yDrag.dispose();
|
|
|
+ this._zDrag.dispose();
|
|
|
+ };
|
|
|
+ return PositionGizmo;
|
|
|
+ }(BABYLON.Gizmo));
|
|
|
+ BABYLON.PositionGizmo = PositionGizmo;
|
|
|
+})(BABYLON || (BABYLON = {}));
|
|
|
+
|
|
|
+//# sourceMappingURL=babylon.positionGizmo.js.map
|
|
|
+
|
|
|
+var BABYLON;
|
|
|
+(function (BABYLON) {
|
|
|
+ /**
|
|
|
* Defines a target to use with MorphTargetManager
|
|
|
* @see http://doc.babylonjs.com/how_to/how_to_use_morphtargets
|
|
|
*/
|
|
|
@@ -96366,7 +96508,7 @@ var BABYLON;
|
|
|
var PointerDragBehavior = /** @class */ (function () {
|
|
|
/**
|
|
|
* Creates a pointer drag behavior that can be attached to a mesh
|
|
|
- * @param options The drag axis or normal of the plane that will be dragged accross
|
|
|
+ * @param options The drag axis or normal of the plane that will be dragged across. pointerObservableScene can be used to listen to drag events from another scene(eg. if the attached mesh is in an overlay scene).
|
|
|
*/
|
|
|
function PointerDragBehavior(options) {
|
|
|
this.options = options;
|
|
|
@@ -96426,6 +96568,9 @@ var BABYLON;
|
|
|
PointerDragBehavior.prototype.attach = function (ownerNode) {
|
|
|
var _this = this;
|
|
|
this._scene = ownerNode.getScene();
|
|
|
+ if (!this.options.pointerObservableScene) {
|
|
|
+ this.options.pointerObservableScene = this._scene;
|
|
|
+ }
|
|
|
this._attachedNode = ownerNode;
|
|
|
// Initialize drag plane to not interfere with existing scene
|
|
|
if (!PointerDragBehavior._planeScene) {
|
|
|
@@ -96437,32 +96582,44 @@ var BABYLON;
|
|
|
var dragging = false;
|
|
|
var lastPosition = new BABYLON.Vector3(0, 0, 0);
|
|
|
var delta = new BABYLON.Vector3(0, 0, 0);
|
|
|
- this._pointerObserver = this._scene.onPointerObservable.add(function (pointerInfo) {
|
|
|
- if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
|
|
|
- if (!dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray) {
|
|
|
- if (_this._attachedNode == pointerInfo.pickInfo.pickedMesh) {
|
|
|
- _this._updateDragPlanePosition(pointerInfo.pickInfo.ray);
|
|
|
- var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
|
|
|
- if (pickedPoint) {
|
|
|
- dragging = true;
|
|
|
- _this._draggingID = pointerInfo.event.pointerId;
|
|
|
- lastPosition.copyFrom(pickedPoint);
|
|
|
- _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint });
|
|
|
- }
|
|
|
+ var pickPredicate = function (m) {
|
|
|
+ return _this._attachedNode == m || m.isDescendantOf(_this._attachedNode);
|
|
|
+ };
|
|
|
+ this._pointerObserver = this.options.pointerObservableScene.onPrePointerObservable.add(function (pointerInfoPre, eventState) {
|
|
|
+ // Check if attached mesh is picked
|
|
|
+ var pickInfo = pointerInfoPre.ray ? _this._scene.pickWithRay(pointerInfoPre.ray, pickPredicate) : _this._scene.pick(_this._scene.pointerX, _this._scene.pointerY, pickPredicate);
|
|
|
+ if (pickInfo) {
|
|
|
+ pickInfo.ray = pointerInfoPre.ray;
|
|
|
+ if (!pickInfo.ray) {
|
|
|
+ pickInfo.ray = _this.options.pointerObservableScene.createPickingRay(_this._scene.pointerX, _this._scene.pointerY, BABYLON.Matrix.Identity(), _this._scene.activeCamera);
|
|
|
+ }
|
|
|
+ if (pickInfo.hit) {
|
|
|
+ eventState.skipNextObservers = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (pointerInfoPre.type == BABYLON.PointerEventTypes.POINTERDOWN) {
|
|
|
+ if (!dragging && pickInfo && pickInfo.hit && pickInfo.pickedMesh && pickInfo.ray) {
|
|
|
+ _this._updateDragPlanePosition(pickInfo.ray);
|
|
|
+ var pickedPoint = _this._pickWithRayOnDragPlane(pickInfo.ray);
|
|
|
+ if (pickedPoint) {
|
|
|
+ dragging = true;
|
|
|
+ _this._draggingID = pointerInfoPre.event.pointerId;
|
|
|
+ lastPosition.copyFrom(pickedPoint);
|
|
|
+ _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP) {
|
|
|
- if (_this._draggingID == pointerInfo.event.pointerId) {
|
|
|
+ else if (pointerInfoPre.type == BABYLON.PointerEventTypes.POINTERUP) {
|
|
|
+ if (_this._draggingID == pointerInfoPre.event.pointerId) {
|
|
|
dragging = false;
|
|
|
_this._draggingID = -1;
|
|
|
_this.onDragEndObservable.notifyObservers({ dragPlanePoint: lastPosition });
|
|
|
}
|
|
|
}
|
|
|
- else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE) {
|
|
|
- if (_this._draggingID == pointerInfo.event.pointerId && dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray) {
|
|
|
- var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
|
|
|
- _this._updateDragPlanePosition(pointerInfo.pickInfo.ray);
|
|
|
+ else if (pointerInfoPre.type == BABYLON.PointerEventTypes.POINTERMOVE) {
|
|
|
+ if (_this._draggingID == pointerInfoPre.event.pointerId && dragging && pickInfo && pickInfo.ray) {
|
|
|
+ var pickedPoint = _this._pickWithRayOnDragPlane(pickInfo.ray);
|
|
|
+ _this._updateDragPlanePosition(pickInfo.ray);
|
|
|
if (pickedPoint) {
|
|
|
// depending on the drag mode option drag accordingly
|
|
|
if (_this.options.dragAxis) {
|
|
|
@@ -96524,7 +96681,7 @@ var BABYLON;
|
|
|
*/
|
|
|
PointerDragBehavior.prototype.detach = function () {
|
|
|
if (this._pointerObserver) {
|
|
|
- this._scene.onPointerObservable.remove(this._pointerObserver);
|
|
|
+ this._scene.onPrePointerObservable.remove(this._pointerObserver);
|
|
|
}
|
|
|
};
|
|
|
return PointerDragBehavior;
|
David Catuhe