mirror of
https://github.com/JulianGro/overte.git
synced 2025-04-30 14:22:56 +02:00
322 lines
13 KiB
JavaScript
322 lines
13 KiB
JavaScript
//
|
|
// movable.js
|
|
// examples/entityScripts
|
|
//
|
|
// Created by Brad Hefta-Gaub on 11/17/14.
|
|
// Copyright 2014 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
(function(){
|
|
|
|
this.entityID = null;
|
|
this.properties = null;
|
|
this.graboffset = null;
|
|
this.clickedAt = null;
|
|
this.firstHolding = true;
|
|
this.clickedX = -1;
|
|
this.clickedY = -1;
|
|
this.rotateOverlayTarget = null;
|
|
this.rotateOverlayInner = null;
|
|
this.rotateOverlayOuter = null;
|
|
this.rotateOverlayCurrent = null;
|
|
this.rotateMode = false;
|
|
this.originalRotation = null;
|
|
this.sound = null;
|
|
this.injector = null;
|
|
|
|
var rotateOverlayTargetSize = 10000; // really big target
|
|
var innerSnapAngle = 22.5; // the angle which we snap to on the inner rotation tool
|
|
var innerRadius;
|
|
var outerRadius;
|
|
var yawCenter;
|
|
var yawZero;
|
|
var rotationNormal;
|
|
var yawNormal;
|
|
|
|
var debug = true;
|
|
|
|
// Download sound if needed
|
|
this.maybeDownloadSound = function() {
|
|
if (this.sound === null) {
|
|
this.sound = SoundCache.getSound("http://public.highfidelity.io/sounds/Collisions-otherorganic/whoosh2.raw");
|
|
}
|
|
}
|
|
// Play drag sound
|
|
this.playSound = function() {
|
|
this.stopSound();
|
|
if (this.sound && this.sound.downloaded) {
|
|
this.injector = Audio.playSound(this.sound, { position: this.properties.position, loop: true, volume: 0.1 });
|
|
}
|
|
}
|
|
|
|
// stop drag sound
|
|
this.stopSound = function() {
|
|
if (this.injector) {
|
|
Audio.stopInjector(this.injector);
|
|
this.injector = null;
|
|
}
|
|
}
|
|
|
|
// Pr, Vr are respectively the Ray's Point of origin and Vector director
|
|
// Pp, Np are respectively the Plane's Point of origin and Normal vector
|
|
this.rayPlaneIntersection = function(Pr, Vr, Pp, Np) {
|
|
var d = -Vec3.dot(Pp, Np);
|
|
var t = -(Vec3.dot(Pr, Np) + d) / Vec3.dot(Vr, Np);
|
|
return Vec3.sum(Pr, Vec3.multiply(t, Vr));
|
|
};
|
|
|
|
// updates the piece position based on mouse input
|
|
this.updatePosition = function(mouseEvent) {
|
|
var pickRay = Camera.computePickRay(mouseEvent.x, mouseEvent.y)
|
|
var upVector = { x: 0, y: 1, z: 0 };
|
|
var intersection = this.rayPlaneIntersection(pickRay.origin, pickRay.direction,
|
|
this.properties.position, upVector);
|
|
|
|
var newPosition = Vec3.sum(intersection, this.graboffset);
|
|
Entities.editEntity(this.entityID, { position: newPosition });
|
|
};
|
|
|
|
this.grab = function(mouseEvent) {
|
|
// first calculate the offset
|
|
var pickRay = Camera.computePickRay(mouseEvent.x, mouseEvent.y)
|
|
var upVector = { x: 0, y: 1, z: 0 };
|
|
var intersection = this.rayPlaneIntersection(pickRay.origin, pickRay.direction,
|
|
this.properties.position, upVector);
|
|
this.graboffset = Vec3.subtract(this.properties.position, intersection);
|
|
};
|
|
|
|
this.move = function(mouseEvent) {
|
|
this.updatePosition(mouseEvent);
|
|
if (this.injector === null) {
|
|
this.playSound();
|
|
}
|
|
};
|
|
|
|
this.release = function(mouseEvent) {
|
|
this.updatePosition(mouseEvent);
|
|
};
|
|
|
|
this.rotate = function(mouseEvent) {
|
|
var pickRay = Camera.computePickRay(mouseEvent.x, mouseEvent.y)
|
|
var result = Overlays.findRayIntersection(pickRay);
|
|
|
|
if (result.intersects) {
|
|
var center = yawCenter;
|
|
var zero = yawZero;
|
|
var centerToZero = Vec3.subtract(center, zero);
|
|
var centerToIntersect = Vec3.subtract(center, result.intersection);
|
|
var angleFromZero = Vec3.orientedAngle(centerToZero, centerToIntersect, rotationNormal);
|
|
|
|
var distanceFromCenter = Vec3.distance(center, result.intersection);
|
|
var snapToInner = false;
|
|
// var innerRadius = (Vec3.length(selectionManager.worldDimensions) / 2) * 1.1;
|
|
if (distanceFromCenter < innerRadius) {
|
|
angleFromZero = Math.floor(angleFromZero/innerSnapAngle) * innerSnapAngle;
|
|
snapToInner = true;
|
|
}
|
|
|
|
var yawChange = Quat.fromVec3Degrees({ x: 0, y: angleFromZero, z: 0 });
|
|
Entities.editEntity(this.entityID, { rotation: Quat.multiply(yawChange, this.originalRotation) });
|
|
|
|
|
|
// update the rotation display accordingly...
|
|
var startAtCurrent = 360-angleFromZero;
|
|
var endAtCurrent = 360;
|
|
var startAtRemainder = 0;
|
|
var endAtRemainder = 360-angleFromZero;
|
|
if (angleFromZero < 0) {
|
|
startAtCurrent = 0;
|
|
endAtCurrent = -angleFromZero;
|
|
startAtRemainder = -angleFromZero;
|
|
endAtRemainder = 360;
|
|
}
|
|
|
|
if (snapToInner) {
|
|
Overlays.editOverlay(this.rotateOverlayOuter, { startAt: 0, endAt: 360 });
|
|
Overlays.editOverlay(this.rotateOverlayInner, { startAt: startAtRemainder, endAt: endAtRemainder });
|
|
Overlays.editOverlay(this.rotateOverlayCurrent, { startAt: startAtCurrent, endAt: endAtCurrent, size: innerRadius,
|
|
majorTickMarksAngle: innerSnapAngle, minorTickMarksAngle: 0,
|
|
majorTickMarksLength: -0.25, minorTickMarksLength: 0, });
|
|
} else {
|
|
Overlays.editOverlay(this.rotateOverlayInner, { startAt: 0, endAt: 360 });
|
|
Overlays.editOverlay(this.rotateOverlayOuter, { startAt: startAtRemainder, endAt: endAtRemainder });
|
|
Overlays.editOverlay(this.rotateOverlayCurrent, { startAt: startAtCurrent, endAt: endAtCurrent, size: outerRadius,
|
|
majorTickMarksAngle: 45.0, minorTickMarksAngle: 5,
|
|
majorTickMarksLength: 0.25, minorTickMarksLength: 0.1, });
|
|
}
|
|
}
|
|
};
|
|
// All callbacks start by updating the properties
|
|
this.updateProperties = function(entityID) {
|
|
if (this.entityID === null || !this.entityID.isKnownID) {
|
|
this.entityID = Entities.identifyEntity(entityID);
|
|
}
|
|
this.properties = Entities.getEntityProperties(this.entityID);
|
|
};
|
|
|
|
this.cleanupRotateOverlay = function() {
|
|
Overlays.deleteOverlay(this.rotateOverlayTarget);
|
|
Overlays.deleteOverlay(this.rotateOverlayInner);
|
|
Overlays.deleteOverlay(this.rotateOverlayOuter);
|
|
Overlays.deleteOverlay(this.rotateOverlayCurrent);
|
|
this.rotateOverlayTarget = null;
|
|
this.rotateOverlayInner = null;
|
|
this.rotateOverlayOuter = null;
|
|
this.rotateOverlayCurrent = null;
|
|
}
|
|
|
|
this.displayRotateOverlay = function(mouseEvent) {
|
|
var yawOverlayAngles = { x: 90, y: 0, z: 0 };
|
|
var yawOverlayRotation = Quat.fromVec3Degrees(yawOverlayAngles);
|
|
|
|
yawNormal = { x: 0, y: 1, z: 0 };
|
|
yawCenter = this.properties.position;
|
|
rotationNormal = yawNormal;
|
|
|
|
// Size the overlays to the current selection size
|
|
var diagonal = (Vec3.length(this.properties.dimensions) / 2) * 1.1;
|
|
var halfDimensions = Vec3.multiply(this.properties.dimensions, 0.5);
|
|
innerRadius = diagonal;
|
|
outerRadius = diagonal * 1.15;
|
|
var innerAlpha = 0.2;
|
|
var outerAlpha = 0.2;
|
|
|
|
this.rotateOverlayTarget = Overlays.addOverlay("circle3d", {
|
|
position: this.properties.position,
|
|
size: 10000,
|
|
color: { red: 0, green: 0, blue: 0 },
|
|
alpha: 0.0,
|
|
solid: true,
|
|
visible: true,
|
|
rotation: yawOverlayRotation,
|
|
ignoreRayIntersection: false
|
|
});
|
|
|
|
this.rotateOverlayInner = Overlays.addOverlay("circle3d", {
|
|
position: this.properties.position,
|
|
size: innerRadius,
|
|
innerRadius: 0.9,
|
|
alpha: innerAlpha,
|
|
color: { red: 51, green: 152, blue: 203 },
|
|
solid: true,
|
|
visible: true,
|
|
rotation: yawOverlayRotation,
|
|
hasTickMarks: true,
|
|
majorTickMarksAngle: innerSnapAngle,
|
|
minorTickMarksAngle: 0,
|
|
majorTickMarksLength: -0.25,
|
|
minorTickMarksLength: 0,
|
|
majorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
minorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
ignoreRayIntersection: true, // always ignore this
|
|
});
|
|
|
|
this.rotateOverlayOuter = Overlays.addOverlay("circle3d", {
|
|
position: this.properties.position,
|
|
size: outerRadius,
|
|
innerRadius: 0.9,
|
|
startAt: 0,
|
|
endAt: 360,
|
|
alpha: outerAlpha,
|
|
color: { red: 51, green: 152, blue: 203 },
|
|
solid: true,
|
|
visible: true,
|
|
rotation: yawOverlayRotation,
|
|
|
|
hasTickMarks: true,
|
|
majorTickMarksAngle: 45.0,
|
|
minorTickMarksAngle: 5,
|
|
majorTickMarksLength: 0.25,
|
|
minorTickMarksLength: 0.1,
|
|
majorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
minorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
ignoreRayIntersection: true, // always ignore this
|
|
});
|
|
|
|
this.rotateOverlayCurrent = Overlays.addOverlay("circle3d", {
|
|
position: this.properties.position,
|
|
size: outerRadius,
|
|
startAt: 0,
|
|
endAt: 0,
|
|
innerRadius: 0.9,
|
|
color: { red: 224, green: 67, blue: 36},
|
|
alpha: 0.8,
|
|
solid: true,
|
|
visible: true,
|
|
rotation: yawOverlayRotation,
|
|
ignoreRayIntersection: true, // always ignore this
|
|
hasTickMarks: true,
|
|
majorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
minorTickMarksColor: { red: 0, green: 0, blue: 0 },
|
|
});
|
|
|
|
var pickRay = Camera.computePickRay(mouseEvent.x, mouseEvent.y)
|
|
var result = Overlays.findRayIntersection(pickRay);
|
|
yawZero = result.intersection;
|
|
|
|
};
|
|
|
|
this.preload = function(entityID) {
|
|
this.updateProperties(entityID); // All callbacks start by updating the properties
|
|
this.maybeDownloadSound();
|
|
};
|
|
|
|
this.clickDownOnEntity = function(entityID, mouseEvent) {
|
|
this.updateProperties(entityID); // All callbacks start by updating the properties
|
|
this.grab(mouseEvent);
|
|
|
|
var d = new Date();
|
|
this.clickedAt = d.getTime();
|
|
this.firstHolding = true;
|
|
|
|
this.clickedX = mouseEvent.x;
|
|
this.clickedY = mouseEvent.y;
|
|
};
|
|
|
|
this.holdingClickOnEntity = function(entityID, mouseEvent) {
|
|
|
|
this.updateProperties(entityID); // All callbacks start by updating the properties
|
|
|
|
if (this.firstHolding) {
|
|
// if we haven't moved yet...
|
|
if (this.clickedX == mouseEvent.x && this.clickedY == mouseEvent.y) {
|
|
var d = new Date();
|
|
var now = d.getTime();
|
|
|
|
if (now - this.clickedAt > 500) {
|
|
this.displayRotateOverlay(mouseEvent);
|
|
this.firstHolding = false;
|
|
this.rotateMode = true;
|
|
this.originalRotation = this.properties.rotation;
|
|
}
|
|
} else {
|
|
this.firstHolding = false;
|
|
}
|
|
}
|
|
|
|
if (this.rotateMode) {
|
|
this.rotate(mouseEvent);
|
|
} else {
|
|
this.move(mouseEvent);
|
|
}
|
|
};
|
|
this.clickReleaseOnEntity = function(entityID, mouseEvent) {
|
|
this.updateProperties(entityID); // All callbacks start by updating the properties
|
|
if (this.rotateMode) {
|
|
this.rotate(mouseEvent);
|
|
} else {
|
|
this.release(mouseEvent);
|
|
}
|
|
|
|
if (this.rotateOverlayTarget != null) {
|
|
this.cleanupRotateOverlay();
|
|
this.rotateMode = false;
|
|
}
|
|
|
|
this.firstHolding = false;
|
|
this.stopSound();
|
|
};
|
|
|
|
})
|