'init'
This commit is contained in:
34
src/views/3DOverview/v3dApp/app.css
Normal file
34
src/views/3DOverview/v3dApp/app.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */
|
||||
|
||||
#v3d-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fullscreen-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
background-size: 100% 100%;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fullscreen-open {
|
||||
background-image: url('media/fullscreen_open.svg');
|
||||
}
|
||||
|
||||
.fullscreen-close {
|
||||
background-image: url('media/fullscreen_close.svg');
|
||||
}
|
||||
|
||||
/* removes tap blinking on ios devices */
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
234
src/views/3DOverview/v3dApp/app.js
Normal file
234
src/views/3DOverview/v3dApp/app.js
Normal file
@@ -0,0 +1,234 @@
|
||||
/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
var CONTAINER_ID = 'v3d-container';
|
||||
|
||||
/**
|
||||
* Path to prepend to request URLs for the scene .gltf file and the visual logic
|
||||
* .js file.
|
||||
*/
|
||||
var REL_URL_PREFIX = 'v3dApp/';
|
||||
|
||||
/**
|
||||
* Load the visual logic .js and/or .xml file or not. The Puzzles Editor is
|
||||
* currently not fully supported.
|
||||
* See: https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#using_the_puzzles_editor
|
||||
*/
|
||||
var LOAD_LOGIC_FILES = true;
|
||||
|
||||
function createApp() {
|
||||
|
||||
var params = v3d.AppUtils.getPageParams();
|
||||
|
||||
var PUZZLES_DIR = '/puzzles/';
|
||||
var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', REL_URL_PREFIX);
|
||||
var sceneURL = params.load ? params.load : '__URL__app.gltf'.replace('__URL__', REL_URL_PREFIX);
|
||||
if (!sceneURL) {
|
||||
console.log('No scene URL specified');
|
||||
return;
|
||||
}
|
||||
|
||||
// some puzzles can benefit from cache
|
||||
v3d.Cache.enabled = true;
|
||||
|
||||
return new Promise(function(resolve) {
|
||||
|
||||
if (LOAD_LOGIC_FILES) {
|
||||
if (v3d.AppUtils.isXML(logicURL)) {
|
||||
var logicURLJS = logicURL.match(/(.*)\.xml$/)[1] + '.js';
|
||||
new v3d.PuzzlesLoader().loadEditorWithLogic(PUZZLES_DIR, logicURLJS,
|
||||
function() {
|
||||
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles({
|
||||
container: CONTAINER_ID }).initOptions
|
||||
: { useFullscreen: true };
|
||||
var appInstance = loadScene(sceneURL, initOptions);
|
||||
v3d.PE.viewportUseAppInstance(appInstance);
|
||||
resolve(appInstance);
|
||||
}
|
||||
);
|
||||
} else if (v3d.AppUtils.isJS(logicURL)) {
|
||||
new v3d.PuzzlesLoader().loadLogic(logicURL, function() {
|
||||
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles({
|
||||
container: CONTAINER_ID }).initOptions
|
||||
: { useFullscreen: true };
|
||||
resolve(loadScene(sceneURL, initOptions));
|
||||
});
|
||||
} else {
|
||||
resolve(loadScene(sceneURL, { useFullscreen: true }));
|
||||
}
|
||||
} else {
|
||||
resolve(loadScene(sceneURL, { useFullscreen: true }));
|
||||
}
|
||||
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
function loadScene(sceneURL, initOptions) {
|
||||
|
||||
initOptions = initOptions || {};
|
||||
|
||||
var ctxSettings = {};
|
||||
if (initOptions.useBkgTransp) ctxSettings.alpha = true;
|
||||
if (initOptions.preserveDrawBuf) ctxSettings.preserveDrawingBuffer = true;
|
||||
|
||||
var preloader = initOptions.useCustomPreloader
|
||||
? createCustomPreloader(initOptions.preloaderProgressCb,
|
||||
initOptions.preloaderEndCb)
|
||||
: new v3d.SimplePreloader({ container: CONTAINER_ID });
|
||||
|
||||
if (v3d.PE) {
|
||||
puzzlesEditorPreparePreloader(preloader);
|
||||
}
|
||||
|
||||
var app = new v3d.App(CONTAINER_ID, ctxSettings, preloader);
|
||||
if (initOptions.useBkgTransp) {
|
||||
app.clearBkgOnLoad = true;
|
||||
app.renderer.setClearColor(0x000000, 0);
|
||||
}
|
||||
|
||||
// namespace for communicating with code generated by Puzzles
|
||||
app.ExternalInterface = {};
|
||||
prepareExternalInterface(app);
|
||||
|
||||
if (initOptions.preloaderStartCb) initOptions.preloaderStartCb();
|
||||
if (initOptions.useFullscreen) {
|
||||
initFullScreen();
|
||||
} else {
|
||||
var fsButton = document.getElementById('fullscreen_button');
|
||||
if (fsButton) fsButton.style.display = 'none';
|
||||
}
|
||||
|
||||
sceneURL = initOptions.useCompAssets ? sceneURL + '.xz' : sceneURL;
|
||||
app.loadScene(sceneURL, function() {
|
||||
app.enableControls();
|
||||
app.run();
|
||||
|
||||
if (v3d.PE) v3d.PE.updateAppInstance(app);
|
||||
if (v3d.PL) v3d.PL.init(app, initOptions);
|
||||
|
||||
runCode(app);
|
||||
}, null, function() {
|
||||
console.log('Can\'t load the scene ' + sceneURL);
|
||||
});
|
||||
|
||||
return app;
|
||||
}
|
||||
|
||||
function createCustomPreloader(updateCb, finishCb) {
|
||||
function CustomPreloader() {
|
||||
v3d.Preloader.call(this);
|
||||
}
|
||||
|
||||
CustomPreloader.prototype = Object.assign(Object.create(v3d.Preloader.prototype), {
|
||||
onUpdate: function(percentage) {
|
||||
v3d.Preloader.prototype.onUpdate.call(this, percentage);
|
||||
if (updateCb) updateCb(percentage);
|
||||
},
|
||||
onFinish: function() {
|
||||
v3d.Preloader.prototype.onFinish.call(this);
|
||||
if (finishCb) finishCb();
|
||||
}
|
||||
});
|
||||
|
||||
return new CustomPreloader();
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify the app's preloader to track the loading process in the Puzzles Editor.
|
||||
*/
|
||||
function puzzlesEditorPreparePreloader(preloader) {
|
||||
var _onUpdate = preloader.onUpdate.bind(preloader);
|
||||
preloader.onUpdate = function(percentage) {
|
||||
_onUpdate(percentage);
|
||||
v3d.PE.loadingUpdateCb(percentage);
|
||||
}
|
||||
|
||||
var _onFinish = preloader.onFinish.bind(preloader);
|
||||
preloader.onFinish = function() {
|
||||
_onFinish();
|
||||
v3d.PE.loadingFinishCb();
|
||||
}
|
||||
}
|
||||
|
||||
function initFullScreen() {
|
||||
|
||||
var fsButton = document.getElementById('fullscreen_button');
|
||||
if (!fsButton) return;
|
||||
|
||||
var container = document.getElementById(CONTAINER_ID);
|
||||
|
||||
if (document.fullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled)
|
||||
fsButton.style.display = 'inline';
|
||||
|
||||
fsButton.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
if (document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement) {
|
||||
exitFullscreen();
|
||||
} else
|
||||
requestFullscreen(container);
|
||||
});
|
||||
|
||||
function changeFullscreen() {
|
||||
if (document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement) {
|
||||
fsButton.classList.remove('fullscreen-open');
|
||||
fsButton.classList.add('fullscreen-close');
|
||||
} else {
|
||||
fsButton.classList.remove('fullscreen-close');
|
||||
fsButton.classList.add('fullscreen-open');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('webkitfullscreenchange', changeFullscreen);
|
||||
document.addEventListener('mozfullscreenchange', changeFullscreen);
|
||||
document.addEventListener('msfullscreenchange', changeFullscreen);
|
||||
document.addEventListener('fullscreenchange', changeFullscreen);
|
||||
|
||||
function requestFullscreen(elem) {
|
||||
if (elem.requestFullscreen)
|
||||
elem.requestFullscreen();
|
||||
else if (elem.mozRequestFullScreen)
|
||||
elem.mozRequestFullScreen();
|
||||
else if (elem.webkitRequestFullscreen)
|
||||
elem.webkitRequestFullscreen();
|
||||
else if (elem.msRequestFullscreen)
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
|
||||
function exitFullscreen() {
|
||||
if (document.exitFullscreen)
|
||||
document.exitFullscreen();
|
||||
else if (document.mozCancelFullScreen)
|
||||
document.mozCancelFullScreen();
|
||||
else if (document.webkitExitFullscreen)
|
||||
document.webkitExitFullscreen();
|
||||
else if (document.msExitFullscreen)
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function prepareExternalInterface(app) {
|
||||
// register functions in the app.ExternalInterface to call them from Puzzles, e.g:
|
||||
// app.ExternalInterface.myJSFunction = function() {
|
||||
// console.log('Hello, World!');
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
function runCode(app) {
|
||||
// add your code here, e.g. console.log('Hello, World!');
|
||||
|
||||
}
|
||||
|
||||
export { createApp, CONTAINER_ID };
|
||||
105
src/views/3DOverview/v3dApp/media/fullscreen_close.svg
Normal file
105
src/views/3DOverview/v3dApp/media/fullscreen_close.svg
Normal file
@@ -0,0 +1,105 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="62"
|
||||
height="62"
|
||||
viewBox="0 0 16.404167 16.404167"
|
||||
version="1.1"
|
||||
id="svg2719">
|
||||
<defs
|
||||
id="defs2713">
|
||||
<linearGradient
|
||||
gradientTransform="rotate(-180,255.67833,614.731)"
|
||||
xlink:href="#linearGradient2768"
|
||||
id="linearGradient2673"
|
||||
x1="501.88306"
|
||||
y1="942.95502"
|
||||
x2="508.08038"
|
||||
y2="935.61182"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
id="linearGradient2768">
|
||||
<stop
|
||||
style="stop-color:#414141;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop2764" />
|
||||
<stop
|
||||
style="stop-color:#767676;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop2766" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
gradientTransform="translate(-493.24109,-653.06985)"
|
||||
xlink:href="#linearGradient2648"
|
||||
id="linearGradient2665"
|
||||
x1="495.62714"
|
||||
y1="948.00964"
|
||||
x2="508.85629"
|
||||
y2="934.78046"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
id="linearGradient2648">
|
||||
<stop
|
||||
style="stop-color:#ebebeb;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop2644" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop2646" />
|
||||
</linearGradient>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter2688"
|
||||
x="-0.12"
|
||||
width="1.24"
|
||||
y="-0.12"
|
||||
height="1.24">
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.66145835"
|
||||
id="feGaussianBlur2690" />
|
||||
</filter>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata2716">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(0,-280.59582)">
|
||||
<g
|
||||
id="g2754"
|
||||
transform="translate(-0.79853618,0.47271794)">
|
||||
<rect
|
||||
rx="0"
|
||||
ry="1.376092"
|
||||
y="281.7106"
|
||||
x="2.3860359"
|
||||
height="13.229167"
|
||||
width="13.229167"
|
||||
id="rect2614"
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:0.53005461;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2688)" />
|
||||
<path
|
||||
id="rect2603"
|
||||
d="M 3.7621171,281.7106 H 14.2391 c 0.762355,0 1.376092,0.61374 1.376092,1.37609 v 10.47699 c 0,0.76235 -0.613737,1.37609 -1.376092,1.37609 H 3.7621171 c -0.7623549,0 -1.3760919,-0.61374 -1.3760919,-1.37609 v -10.47699 c 0,-0.76235 0.613737,-1.37609 1.3760919,-1.37609 z"
|
||||
style="display:inline;opacity:1;fill:url(#linearGradient2665);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
|
||||
<path
|
||||
id="rect2605"
|
||||
d="M 9.0089403,293.54618 H 4.4659401 c -0.39995,0 -0.72192,-0.32198 -0.72192,-0.72192 v -4.49623 c 0,-0.39994 0.50644,-0.7845 0.9865,-0.32421 0.48006,0.46029 4.2498102,4.07528 4.7127902,4.53146 0.46297,0.45619 0.15571,1.0109 -0.43437,1.0109 z"
|
||||
style="display:inline;opacity:1;fill:url(#linearGradient2673);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.80000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
105
src/views/3DOverview/v3dApp/media/fullscreen_open.svg
Normal file
105
src/views/3DOverview/v3dApp/media/fullscreen_open.svg
Normal file
@@ -0,0 +1,105 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="62"
|
||||
height="62"
|
||||
viewBox="0 0 16.404167 16.404167"
|
||||
version="1.1"
|
||||
id="svg2719">
|
||||
<defs
|
||||
id="defs2713">
|
||||
<linearGradient
|
||||
gradientTransform="translate(-493.24109,-653.06985)"
|
||||
xlink:href="#linearGradient2768"
|
||||
id="linearGradient2673"
|
||||
x1="501.88306"
|
||||
y1="942.95502"
|
||||
x2="508.08038"
|
||||
y2="935.61182"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
id="linearGradient2768">
|
||||
<stop
|
||||
style="stop-color:#414141;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop2764" />
|
||||
<stop
|
||||
style="stop-color:#767676;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop2766" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
gradientTransform="translate(-493.24109,-653.06985)"
|
||||
xlink:href="#linearGradient2648"
|
||||
id="linearGradient2665"
|
||||
x1="495.62714"
|
||||
y1="948.00964"
|
||||
x2="508.85629"
|
||||
y2="934.78046"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
id="linearGradient2648">
|
||||
<stop
|
||||
style="stop-color:#ebebeb;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop2644" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop2646" />
|
||||
</linearGradient>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter2688"
|
||||
x="-0.12"
|
||||
width="1.24"
|
||||
y="-0.12"
|
||||
height="1.24">
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.66145835"
|
||||
id="feGaussianBlur2690" />
|
||||
</filter>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata2716">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(0,-280.59582)">
|
||||
<g
|
||||
id="g2754"
|
||||
transform="translate(-0.79853618,0.47271794)">
|
||||
<rect
|
||||
rx="0"
|
||||
ry="1.376092"
|
||||
y="281.7106"
|
||||
x="2.3860359"
|
||||
height="13.229167"
|
||||
width="13.229167"
|
||||
id="rect2614"
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:0.53005461;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2688)" />
|
||||
<path
|
||||
id="rect2603"
|
||||
d="M 3.7621171,281.7106 H 14.2391 c 0.762355,0 1.376092,0.61374 1.376092,1.37609 v 10.47699 c 0,0.76235 -0.613737,1.37609 -1.376092,1.37609 H 3.7621171 c -0.7623549,0 -1.3760919,-0.61374 -1.3760919,-1.37609 v -10.47699 c 0,-0.76235 0.613737,-1.37609 1.3760919,-1.37609 z"
|
||||
style="display:inline;opacity:1;fill:url(#linearGradient2665);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.71784258;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
|
||||
<path
|
||||
id="rect2605"
|
||||
d="m 9.1066291,282.84597 h 4.5429999 c 0.39995,0 0.72192,0.32198 0.72192,0.72192 v 4.49623 c 0,0.39994 -0.50644,0.7845 -0.9865,0.32421 -0.48006,-0.46029 -4.24981,-4.07528 -4.7127901,-4.53146 -0.46297,-0.45619 -0.1557099,-1.0109 0.4343702,-1.0109 z"
|
||||
style="display:inline;opacity:1;fill:url(#linearGradient2673);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.80000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Reference in New Issue
Block a user