hexa-viewer-communicator
Version:
A simple API for <hexa-viewer>
678 lines (676 loc) • 28.4 kB
JavaScript
;
var _viewerCommunicator = require("./viewer-communicator");
var _viewerCommunicator2 = require("./interfaces/viewer-communicator.interface");
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var vc = new _viewerCommunicator.ViewerCommunicator({
hexaViewer: document.querySelector('hexa-viewer')
});
(function () {
var _this = this;
// vc.getCurrentScreenshot().then((s) => {
// console.log(s);
// });
var wireframeState = false,
configState = false,
uvState = false,
matcapState = false,
hideButtom = false;
var materialize = document.getElementById('materialize');
document.getElementById('config-single').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var config;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
config = [{
// color: 'rgb(229, 222, 204)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_cream_front_552x820.png',
asset: 'http://localhost:9000/index.html?load=https://cdn.creators3d.com/models/3811692498551105_raw.glb&auto-adjust=1&debug=1&tv=162'
}, {
// color: 'rgb(0, 0, 0)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_black_front_552x820.png',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=162&br=true&watermark=1'
}];
config = [config[configState ? 1 : 0]];
configState = !configState;
vc.configurator.setConfigurator(config);
vc.configurator.toggleConfiguratorUI(false);
vc.configurator.selectConfigurator(0);
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
})));
materialize.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
applyMaterial({
RGB: [178, 121, 51],
roughness: 0.1,
metalness: 1,
transparent: false,
environment: {
type: 9,
intensity: 1.3,
blur: false
},
exposure: 1
});
case 1:
case "end":
return _context2.stop();
}
}
}, _callee2);
})), false);
var wireframe = document.getElementById('wireframe');
wireframe.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
wireframeState = !wireframeState;
vc.toggleWireframe(wireframeState);
case 2:
case "end":
return _context3.stop();
}
}
}, _callee3);
})), false);
var uv = document.getElementById('uv');
uv.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
uvState = !uvState;
vc.toggleUvMode(uvState);
case 2:
case "end":
return _context4.stop();
}
}
}, _callee4);
})), false);
var matcap = document.getElementById('matcap');
matcap.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
matcapState = !matcapState;
vc.toggleMatcapMode(matcapState, {
color: '#ff0068'
});
case 2:
case "end":
return _context5.stop();
}
}
}, _callee5);
})), false);
var expotModel = document.getElementById('expotModel');
expotModel.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
var exporderModel;
return regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return vc.expotModel({
compressPNG: false,
downloadFile: false,
type: _viewerCommunicator2.ExportFileType.GLB
});
case 2:
exporderModel = _context6.sent;
console.log(exporderModel);
case 4:
case "end":
return _context6.stop();
}
}
}, _callee6);
})));
var screenshotsSequence = document.getElementById('screenshotsSequence');
screenshotsSequence.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
var videoBlob, video, vidURL;
return regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
_context7.next = 2;
return vc.getScreenshotsSequence({
numOfFrames: 96,
format: _viewerCommunicator2.MediaFormat.VIDEO
// codec: 'vp9'
});
case 2:
videoBlob = _context7.sent;
video = document.createElement('video');
video.autoplay = true;
video.muted = true;
video.loop = true;
document.body.appendChild(video);
vidURL = URL.createObjectURL(videoBlob);
video.onended = function () {
URL.revokeObjectURL(vidURL);
};
// const link = document.createElement('a');
// link.setAttribute(
// 'download', 'v.webm');
// link.href = vidURL;
// link.setAttribute('target', '_blank');
// document.body.appendChild(link);
// link.click();
// link.remove();
video.src = vidURL;
case 11:
case "end":
return _context7.stop();
}
}
}, _callee7);
})), false);
var exportModel = document.getElementById('export');
exportModel.addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
var data;
return regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
_context8.next = 2;
return vc.expotModel({
compressPNG: false,
downloadFile: true,
type: _viewerCommunicator2.ExportFileType.GLB
});
case 2:
data = _context8.sent;
console.log(data);
case 4:
case "end":
return _context8.stop();
}
}
}, _callee8);
})), false);
var applyMaterial = /*#__PURE__*/function () {
var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(material) {
var meshes, name;
return regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
_context9.next = 2;
return vc.onModelLoaded();
case 2:
_context9.next = 4;
return vc.getMeshesData();
case 4:
meshes = _context9.sent;
for (name in meshes) {
vc.materializeMesh(name, material);
}
case 6:
case "end":
return _context9.stop();
}
}
}, _callee9);
}));
return function applyMaterial(_x) {
return _ref9.apply(this, arguments);
};
}();
var initConfigurator = function initConfigurator() {
// const config = [
// {
// 'color': '#ffa0f0',
// 'materials': [
// {
// 'name': 'car_metal',
// 'color': '#ffa0f0'
// }
// ]
// },
// {
// 'color': '4b4a4b',
// 'materials': [
// {
// 'name': 'car_metal',
// 'color': '4b4a4b'
// }
// ]
// },
// {
// 'color': '#010101',
// 'materials': [
// {
// 'name': 'car_metal',
// 'color': '#010101'
// }
// ]
// }
// ] as Array<IConfiguration>;
// const config = [
// {
// 'color': 'rgb(255, 255, 255)',
// 'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F660070899346805%2F660070899346805.glb&autorotate=true&json-data=1658064892018&decrypt=1&br=true&tv=135&watermark=1'
// },
// {
// 'color': 'rgb(229, 222, 204)',
// 'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F5614144034778023%2F5614144034778023.glb&autorotate=true&json-data=1658065184207&decrypt=1&tv=135&watermark=1'
// },
// {
// 'color': 'rgb(119, 111, 98)',
// 'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F3949853585216815%2F3949853585216815.glb&autorotate=true&json-data=1658065089091&decrypt=1&tv=135&br=true&webp=1&watermark=1'
// }
// ] as Array<IConfiguration>;
var config = [{
// color: 'rgb(229, 222, 204)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_cream_front_552x820.png',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F1785766613823082%2F1785766613823082.glb&autorotate=true&json-data=1651045050192&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/50526c5d853941f395e47913e9852ab3.png'
}, {
// color: 'rgb(0, 0, 0)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_black_front_552x820.png',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/73fb4cb1d06f491fa6d8393f4704f816.png'
}, {
// color: 'rgb(255, 255, 255)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_white_front_552x820.png',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F6769057538255978%2F6769057538255978.glb&autorotate=true&json-data=1651046028136&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/e93b62f0f99e41c09c7b9c85a027e071.png'
}, {
// color: 'rgb(220, 39, 25)',
thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_red_front_552x820_0.png',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F3370851792395505%2F3370851792395505.glb&autorotate=true&json-data=1651045321141&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/cc75a12053354011ae8b9a382f95eeb5.png'
}, {
color: 'rgb(229, 222, 204)',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F1785766613823082%2F1785766613823082.glb&autorotate=true&json-data=1651045050192&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/50526c5d853941f395e47913e9852ab3.png'
}, {
color: 'rgb(0, 0, 0)',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/73fb4cb1d06f491fa6d8393f4704f816.png'
}, {
color: 'rgb(255, 255, 255)',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F6769057538255978%2F6769057538255978.glb&autorotate=true&json-data=1651046028136&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/e93b62f0f99e41c09c7b9c85a027e071.png'
}, {
color: 'rgb(220, 39, 25)',
asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F3370851792395505%2F3370851792395505.glb&autorotate=true&json-data=1651045321141&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/cc75a12053354011ae8b9a382f95eeb5.png'
}];
// const config = [
// {
// 'color': '#ffffff',
// 'materials': [
// {
// 'name': 'Material1',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material1_diffuse.png'
// }
// ]
// },
// {
// 'name': 'Material2',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_diffuse.png'
// },
// {
// 'maps': [
// 'metalness',
// 'roughness',
// 'ao'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_roughnessMetallic.png'
// }
// ]
// }
// ],
// 'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE.json?v=1650175969945'
// },
// {
// 'color': '#000000',
// 'materials': [
// {
// 'name': 'Material1',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material1_diffuse.png'
// }
// ]
// },
// {
// 'name': 'Material2',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material2_diffuse.png'
// },
// {
// 'maps': [
// 'metalness',
// 'roughness',
// 'ao'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material2_roughnessMetallic.png'
// }
// ]
// }
// ],
// 'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/910005796__910005808__910005823_GLTF.json'
// },
// {
// 'color': '#0072ce',
// 'materials': [
// {
// 'name': 'Material1',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material1_diffuse.png'
// }
// ]
// },
// {
// 'name': 'Material2',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material2_diffuse.png'
// },
// {
// 'maps': [
// 'metalness',
// 'roughness',
// 'ao'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material2_roughnessMetallic.png'
// }
// ]
// }
// ],
// 'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/910005798__910005801_GLTF.json'
// },
// {
// 'color': '#afbded',
// 'materials': [
// {
// 'name': 'Material1',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material1_diffuse.png'
// }
// ]
// },
// {
// 'name': 'Material2',
// 'textures': [
// {
// 'maps': [
// 'map'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material2_diffuse.png'
// },
// {
// 'maps': [
// 'metalness',
// 'roughness',
// 'ao'
// ],
// 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material2_roughnessMetallic.png'
// }
// ]
// }
// ],
// 'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/910005853__910005854_GLTF.json'
// }
// ] as Array<IConfiguration>;
document.getElementById('configurator-init').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
return regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) {
switch (_context10.prev = _context10.next) {
case 0:
vc.configurator.setConfigurator(config);
config.forEach(function (c, i) {
return vc.configurator.preloadConfigurator(c, (i + 1) * 2000);
});
vc.configurator.toggleConfiguratorUI(true);
case 3:
case "end":
return _context10.stop();
}
}
}, _callee10);
})), false);
document.getElementById('configurator-select').addEventListener('change', /*#__PURE__*/function () {
var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(e) {
return regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) {
switch (_context11.prev = _context11.next) {
case 0:
vc.configurator.selectConfigurator(parseInt(e.target.value));
wireframeState = false;
case 2:
case "end":
return _context11.stop();
}
}
}, _callee11);
}));
return function (_x2) {
return _ref11.apply(this, arguments);
};
}());
document.getElementById('pic-in-pic').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
return regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) {
switch (_context12.prev = _context12.next) {
case 0:
vc.togglePicInPic(!!!document.pictureInPictureElement);
case 1:
case "end":
return _context12.stop();
}
}
}, _callee12);
})), false);
document.getElementById('webxr').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
return regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) {
switch (_context13.prev = _context13.next) {
case 0:
_context13.next = 2;
return vc.isWebXrSupported();
case 2:
if (!_context13.sent) {
_context13.next = 6;
break;
}
vc.toggleWebXR(true, true);
_context13.next = 7;
break;
case 6:
alert('This browser doesn\'t support WebXR');
case 7:
case "end":
return _context13.stop();
}
}
}, _callee13);
})), false);
document.getElementById('collision-init').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
var c;
return regeneratorRuntime.wrap(function _callee14$(_context14) {
while (1) {
switch (_context14.prev = _context14.next) {
case 0:
_context14.next = 2;
return vc.onModelLoaded();
case 2:
vc.toggleCollision(true, '#ff0000');
_context14.next = 5;
return vc.waitForCollisions();
case 5:
c = _context14.sent;
console.log(c);
case 7:
case "end":
return _context14.stop();
}
}
}, _callee14);
})), false);
document.getElementById('preset').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
return regeneratorRuntime.wrap(function _callee15$(_context15) {
while (1) {
switch (_context15.prev = _context15.next) {
case 0:
vc.applyPreset({
hdri: {
background: true,
blur: false,
format: 'hdr',
intensity: 1,
type: 9
}
});
case 1:
case "end":
return _context15.stop();
}
}
}, _callee15);
})), false);
document.getElementById('sync-clock').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
var md, min, sec, hour, syncClock;
return regeneratorRuntime.wrap(function _callee16$(_context16) {
while (1) {
switch (_context16.prev = _context16.next) {
case 0:
_context16.next = 2;
return vc.getMeshesData();
case 2:
md = _context16.sent;
min = 'Arrow_Min', sec = 'Arrow_Sec', hour = 'Arrow_Hr';
syncClock = function syncClock() {
setTimeout(syncClock.bind(_this), 1000);
var now = new Date();
var hours = now.getHours(),
minutes = now.getMinutes(),
seconds = now.getSeconds();
if (hours > 12) hours -= 12;
hours = 6 * hours;
minutes = 6 * minutes;
seconds = 6 * seconds;
md[sec].rotation.y = seconds * (Math.PI / 180);
md[min].rotation.y = minutes * (Math.PI / 180);
md[hour].rotation.y = hours * (Math.PI / 180);
vc.setMeshProps({
mesh: md[sec],
key: 'rotation',
value: md[sec].rotation
});
vc.setMeshProps({
mesh: md[min],
key: 'rotation',
value: md[min].rotation
});
vc.setMeshProps({
mesh: md[hour],
key: 'rotation',
value: md[hour].rotation
});
};
syncClock();
case 6:
case "end":
return _context16.stop();
}
}
}, _callee16);
})), false);
};
initConfigurator();
var applyTexture = /*#__PURE__*/function () {
var _ref17 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
return regeneratorRuntime.wrap(function _callee17$(_context17) {
while (1) {
switch (_context17.prev = _context17.next) {
case 0:
_context17.next = 2;
return vc.onModelLoaded();
case 2:
vc.applyTexture({
mapType: 'map',
materialName: 'Display_MAT',
mimeType: _viewerCommunicator2.TextureMimeType.VIDEO,
src: '#video'
});
case 3:
case "end":
return _context17.stop();
}
}
}, _callee17);
}));
return function applyTexture() {
return _ref17.apply(this, arguments);
};
}();
document.getElementById('apply-texture').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
return regeneratorRuntime.wrap(function _callee18$(_context18) {
while (1) {
switch (_context18.prev = _context18.next) {
case 0:
applyTexture();
case 1:
case "end":
return _context18.stop();
}
}
}, _callee18);
})));
document.getElementById('hide-buttom').addEventListener('click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
return regeneratorRuntime.wrap(function _callee19$(_context19) {
while (1) {
switch (_context19.prev = _context19.next) {
case 0:
hideButtom = !hideButtom;
vc.toggleHideBottom(hideButtom);
case 2:
case "end":
return _context19.stop();
}
}
}, _callee19);
})));
document.getElementById('file').addEventListener('change', function (event) {
vc.displayFiles(event.target.files);
}, false);
vc.getBoundingBox().then(function (b) {
console.log(b);
});
})();