mirror of
https://github.com/overte-org/overte.git
synced 2025-08-09 01:36:56 +02:00
Improve floatingUIExample.js.
Demonstrates overlayManager.js functionality.
This commit is contained in:
parent
ba190b4b34
commit
37a1ad7626
1 changed files with 133 additions and 114 deletions
|
@ -10,140 +10,159 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
Script.include([
|
Script.include([
|
||||||
"../../libraries/globals.js",
|
"../../libraries/globals.js",
|
||||||
"../../libraries/overlayUtils.js",
|
"../../libraries/overlayManager.js",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.svg";
|
var BG_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/card-bg.svg";
|
||||||
var RED_DOT_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/red-dot.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 BLUE_SQUARE_IMAGE_URL = HIFI_PUBLIC_BUCKET + "images/blue-square.svg";
|
||||||
|
|
||||||
var BLANK_ROTATION = { x: 0, y: 0, z: 0, w: 0 };
|
var mainPanel = new FloatingUIPanel({
|
||||||
|
offsetRotation: {
|
||||||
function isBlank(rotation) {
|
bind: "quat",
|
||||||
return rotation.x == BLANK_ROTATION.x &&
|
value: { w: 1, x: 0, y: 0, z: 0 }
|
||||||
rotation.y == BLANK_ROTATION.y &&
|
},
|
||||||
rotation.z == BLANK_ROTATION.z &&
|
offsetPosition: { x: 0, y: 0.4, z: 1 }
|
||||||
rotation.w == BLANK_ROTATION.w;
|
|
||||||
}
|
|
||||||
|
|
||||||
var panel = new FloatingUIPanel({
|
|
||||||
offsetPosition: { x: 0, y: 0, z: 1 },
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var bg = panel.addChild(new BillboardOverlay({
|
var bluePanel = mainPanel.addChild(new FloatingUIPanel ({
|
||||||
url: BG_IMAGE_URL,
|
offsetPosition: { x: 0.1, y: 0.1, z: -0.2 }
|
||||||
dimensions: {
|
|
||||||
x: 0.5,
|
|
||||||
y: 0.5,
|
|
||||||
},
|
|
||||||
isFacingAvatar: false,
|
|
||||||
visible: true,
|
|
||||||
alpha: 1.0,
|
|
||||||
ignoreRayIntersection: false,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var redDot = panel.addChild(new BillboardOverlay({
|
var mainPanelBackground = new BillboardOverlay({
|
||||||
url: RED_DOT_IMAGE_URL,
|
url: BG_IMAGE_URL,
|
||||||
dimensions: {
|
dimensions: {
|
||||||
x: 0.1,
|
x: 0.5,
|
||||||
y: 0.1,
|
y: 0.5,
|
||||||
},
|
},
|
||||||
isFacingAvatar: false,
|
isFacingAvatar: false,
|
||||||
visible: true,
|
alpha: 1.0,
|
||||||
alpha: 1.0,
|
ignoreRayIntersection: false,
|
||||||
ignoreRayIntersection: false,
|
offsetPosition: {
|
||||||
offsetPosition: {
|
x: 0,
|
||||||
x: -0.15,
|
y: 0,
|
||||||
y: -0.15,
|
z: 0.001
|
||||||
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({
|
var redDot2 = mainPanel.addChild(new BillboardOverlay({
|
||||||
url: RED_DOT_IMAGE_URL,
|
url: RED_DOT_IMAGE_URL,
|
||||||
dimensions: {
|
dimensions: {
|
||||||
x: 0.1,
|
x: 0.1,
|
||||||
y: 0.1,
|
y: 0.1,
|
||||||
},
|
},
|
||||||
isFacingAvatar: false,
|
isFacingAvatar: false,
|
||||||
visible: true,
|
alpha: 1.0,
|
||||||
alpha: 1.0,
|
ignoreRayIntersection: false,
|
||||||
ignoreRayIntersection: false,
|
offsetPosition: {
|
||||||
offsetPosition: {
|
x: -0.155,
|
||||||
x: -0.15,
|
y: 0.005,
|
||||||
y: 0,
|
z: 0
|
||||||
z: -0.001
|
}
|
||||||
}
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var blueSquare = panel.addChild(new BillboardOverlay({
|
var blueSquare = bluePanel.addChild(new BillboardOverlay({
|
||||||
url: BLUE_SQUARE_IMAGE_URL,
|
url: BLUE_SQUARE_IMAGE_URL,
|
||||||
dimensions: {
|
dimensions: {
|
||||||
x: 0.1,
|
x: 0.1,
|
||||||
y: 0.1,
|
y: 0.1,
|
||||||
},
|
},
|
||||||
isFacingAvatar: false,
|
isFacingAvatar: false,
|
||||||
visible: true,
|
alpha: 1.0,
|
||||||
alpha: 1.0,
|
ignoreRayIntersection: false,
|
||||||
ignoreRayIntersection: false,
|
offsetPosition: {
|
||||||
offsetPosition: {
|
x: 0.055,
|
||||||
x: 0.1,
|
y: -0.055,
|
||||||
y: 0,
|
z: 0
|
||||||
z: -0.001
|
}
|
||||||
}
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var blueSquare2 = panel.addChild(new BillboardOverlay({
|
var blueSquare2 = bluePanel.addChild(new BillboardOverlay({
|
||||||
url: BLUE_SQUARE_IMAGE_URL,
|
url: BLUE_SQUARE_IMAGE_URL,
|
||||||
dimensions: {
|
dimensions: {
|
||||||
x: 0.1,
|
x: 0.1,
|
||||||
y: 0.1,
|
y: 0.1,
|
||||||
},
|
},
|
||||||
isFacingAvatar: false,
|
isFacingAvatar: false,
|
||||||
visible: true,
|
alpha: 1.0,
|
||||||
alpha: 1.0,
|
ignoreRayIntersection: false,
|
||||||
ignoreRayIntersection: false,
|
offsetPosition: {
|
||||||
offsetPosition: {
|
x: 0.055,
|
||||||
x: 0.1,
|
y: 0.055,
|
||||||
y: 0.11,
|
z: 0
|
||||||
z: -0.001
|
}
|
||||||
}
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var blueSquare3 = blueSquare2.clone();
|
var blueSquare3 = blueSquare2.clone();
|
||||||
blueSquare3.offsetPosition = {
|
blueSquare3.offsetPosition = {
|
||||||
x: -0.01,
|
x: -0.055,
|
||||||
y: 0.11,
|
y: 0.055,
|
||||||
z: -0.001
|
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() {
|
function onMouseDown(event) {
|
||||||
panel.destroy();
|
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