mirror of
https://github.com/overte-org/overte.git
synced 2025-04-21 08:04:01 +02:00
Improve floatingUIExample.js.
Demonstrates overlayManager.js functionality.
This commit is contained in:
Zander Otavka
parent
ba190b4b34
commit
37a1ad7626
1 changed files with 133 additions and 114 deletions
|
|
@ -10,140 +10,159 @@
|
|||
//
|
||||
|
||||
Script.include([
|
||||
"../../libraries/globals.js",
|
||||
"../../libraries/overlayUtils.js",
|
||||
"../../libraries/globals.js",
|
||||
"../../libraries/overlayManager.js",
|
||||
]);
|
||||
|
||||
var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.svg";
|
||||
var RED_DOT_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/red-dot.svg";
|
||||
var BLUE_SQUARE_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/blue-square.svg";
|
||||
|
||||
var BLANK_ROTATION = { x: 0, y: 0, z: 0, w: 0 };
|
||||
|
||||
function isBlank(rotation) {
|
||||
return rotation.x == BLANK_ROTATION.x &&
|
||||
rotation.y == BLANK_ROTATION.y &&
|
||||
rotation.z == BLANK_ROTATION.z &&
|
||||
rotation.w == BLANK_ROTATION.w;
|
||||
}
|
||||
|
||||
var panel = new FloatingUIPanel({
|
||||
offsetPosition: { x: 0, y: 0, z: 1 },
|
||||
var mainPanel = new FloatingUIPanel({
|
||||
offsetRotation: {
|
||||
bind: "quat",
|
||||
value: { w: 1, x: 0, y: 0, z: 0 }
|
||||
},
|
||||
offsetPosition: { x: 0, y: 0.4, z: 1 }
|
||||
});
|
||||
|
||||
var bg = panel.addChild(new BillboardOverlay({
|
||||
url: BG_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
visible: true,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
var bluePanel = mainPanel.addChild(new FloatingUIPanel ({
|
||||
offsetPosition: { x: 0.1, y: 0.1, z: -0.2 }
|
||||
}));
|
||||
|
||||
var redDot = panel.addChild(new BillboardOverlay({
|
||||
url: RED_DOT_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
visible: true,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: -0.15,
|
||||
y: -0.15,
|
||||
z: -0.001
|
||||
}
|
||||
var mainPanelBackground = new BillboardOverlay({
|
||||
url: BG_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0.001
|
||||
}
|
||||
});
|
||||
|
||||
var bluePanelBackground = mainPanelBackground.clone();
|
||||
bluePanelBackground.dimensions = {
|
||||
x: 0.3,
|
||||
y: 0.3
|
||||
};
|
||||
|
||||
mainPanel.addChild(mainPanelBackground);
|
||||
bluePanel.addChild(bluePanelBackground);
|
||||
|
||||
var redDot = mainPanel.addChild(new BillboardOverlay({
|
||||
url: RED_DOT_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: -0.15,
|
||||
y: -0.15,
|
||||
z: 0
|
||||
}
|
||||
}));
|
||||
|
||||
var redDot2 = panel.addChild(new BillboardOverlay({
|
||||
url: RED_DOT_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
visible: true,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: -0.15,
|
||||
y: 0,
|
||||
z: -0.001
|
||||
}
|
||||
var redDot2 = mainPanel.addChild(new BillboardOverlay({
|
||||
url: RED_DOT_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: -0.155,
|
||||
y: 0.005,
|
||||
z: 0
|
||||
}
|
||||
}));
|
||||
|
||||
var blueSquare = panel.addChild(new BillboardOverlay({
|
||||
url: BLUE_SQUARE_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
visible: true,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: 0.1,
|
||||
y: 0,
|
||||
z: -0.001
|
||||
}
|
||||
var blueSquare = bluePanel.addChild(new BillboardOverlay({
|
||||
url: BLUE_SQUARE_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: 0.055,
|
||||
y: -0.055,
|
||||
z: 0
|
||||
}
|
||||
}));
|
||||
|
||||
var blueSquare2 = panel.addChild(new BillboardOverlay({
|
||||
url: BLUE_SQUARE_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
visible: true,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: 0.1,
|
||||
y: 0.11,
|
||||
z: -0.001
|
||||
}
|
||||
var blueSquare2 = bluePanel.addChild(new BillboardOverlay({
|
||||
url: BLUE_SQUARE_IMAGE_URL,
|
||||
dimensions: {
|
||||
x: 0.1,
|
||||
y: 0.1,
|
||||
},
|
||||
isFacingAvatar: false,
|
||||
alpha: 1.0,
|
||||
ignoreRayIntersection: false,
|
||||
offsetPosition: {
|
||||
x: 0.055,
|
||||
y: 0.055,
|
||||
z: 0
|
||||
}
|
||||
}));
|
||||
|
||||
var blueSquare3 = blueSquare2.clone();
|
||||
blueSquare3.offsetPosition = {
|
||||
x: -0.01,
|
||||
y: 0.11,
|
||||
z: -0.001
|
||||
x: -0.055,
|
||||
y: 0.055,
|
||||
z: 0
|
||||
};
|
||||
blueSquare3.ignoreRayIntersection = false;
|
||||
|
||||
Controller.mousePressEvent.connect(function(event) {
|
||||
if (event.isRightButton) {
|
||||
var newOffsetRotation;
|
||||
print(JSON.stringify(panel.offsetRotation))
|
||||
if (isBlank(panel.offsetRotation)) {
|
||||
newOffsetRotation = Quat.multiply(MyAvatar.orientation, { x: 0, y: 1, z: 0, w: 0 });
|
||||
} else {
|
||||
newOffsetRotation = BLANK_ROTATION;
|
||||
}
|
||||
panel.offsetRotation = newOffsetRotation;
|
||||
} else if (event.isLeftButton) {
|
||||
var pickRay = Camera.computePickRay(event.x, event.y)
|
||||
var overlay = panel.findRayIntersection(pickRay);
|
||||
if (overlay) {
|
||||
var oldPos = overlay.offsetPosition;
|
||||
var newPos = {
|
||||
x: Number(oldPos.x),
|
||||
y: Number(oldPos.y),
|
||||
z: Number(oldPos.z) + 0.1
|
||||
}
|
||||
overlay.offsetPosition = newPos;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Script.scriptEnding.connect(function() {
|
||||
panel.destroy();
|
||||
});
|
||||
function onMouseDown(event) {
|
||||
isLeftClick = event.isLeftButton;
|
||||
isRightClick = event.isRightButton;
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
isLeftClick = isRightClick = false;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
if (isLeftClick && event.isLeftButton) {
|
||||
var overlay = OverlayManager.findAtPoint({ x: event.x, y: event.y });
|
||||
print(overlay.attachedPanel);
|
||||
if (overlay.attachedPanel === bluePanel) {
|
||||
overlay.destroy();
|
||||
} else if (overlay) {
|
||||
var oldPos = overlay.offsetPosition;
|
||||
var newPos = {
|
||||
x: Number(oldPos.x),
|
||||
y: Number(oldPos.y),
|
||||
z: Number(oldPos.z) + 0.1
|
||||
};
|
||||
overlay.offsetPosition = newPos;
|
||||
}
|
||||
}
|
||||
if (isRightClick && event.isRightButton) {
|
||||
mainPanel.visible = !mainPanel.visible;
|
||||
}
|
||||
isLeftClick = isRightClick = false;
|
||||
}
|
||||
|
||||
function onScriptEnd() {
|
||||
mainPanel.destroy();
|
||||
}
|
||||
|
||||
Controller.mousePressEvent.connect(onMouseDown);
|
||||
Controller.mouseMoveEvent.connect(onMouseMove);
|
||||
Controller.mouseReleaseEvent.connect(onMouseUp);
|
||||
Script.scriptEnding.connect(onScriptEnd);
|
||||
Loading…
Reference in a new issue