hexa-viewer-communicator
Version:
A simple API for <hexa-viewer>
449 lines (434 loc) • 21.3 kB
text/typescript
import { ViewerCommunicator } from './viewer-communicator';
import { ExportFileType, IBoundingBox, MaterializeMeshConfig, MediaFormat, TextureMimeType } from './interfaces/viewer-communicator.interface';
import { IConfiguration } from './interfaces/configurator.interface';
const vc = new ViewerCommunicator({ hexaViewer: document.querySelector('hexa-viewer') as HTMLElement });
(function () {
// vc.getCurrentScreenshot().then((s) => {
// console.log(s);
// });
let wireframeState = false, configState = false, uvState = false, matcapState = false, hideButtom = false;
let materialize = document.getElementById('materialize') as HTMLElement;
(document.getElementById('config-single') as HTMLElement).addEventListener('click', async () => {
let 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);
});
materialize.addEventListener('click', async () => {
applyMaterial({
RGB: [
178,
121,
51
],
roughness: 0.1,
metalness: 1,
transparent: false,
environment: {
type: 9,
intensity: 1.3,
blur: false
},
exposure: 1
});
}, false);
let wireframe = document.getElementById('wireframe') as HTMLElement;
wireframe.addEventListener('click', async () => {
wireframeState = !wireframeState;
vc.toggleWireframe(wireframeState);
}, false);
let uv = document.getElementById('uv') as HTMLElement;
uv.addEventListener('click', async () => {
uvState = !uvState;
vc.toggleUvMode(uvState);
}, false);
let matcap = document.getElementById('matcap') as HTMLElement;
matcap.addEventListener('click', async () => {
matcapState = !matcapState;
vc.toggleMatcapMode(matcapState, { color: '#ff0068' });
}, false);
let expotModel = document.getElementById('expotModel') as HTMLElement;
expotModel.addEventListener('click', async () => {
const exporderModel = await vc.expotModel({
compressPNG: false,
downloadFile: false,
type: ExportFileType.GLB,
});
console.log(exporderModel);
});
let screenshotsSequence = document.getElementById('screenshotsSequence') as HTMLElement;
screenshotsSequence.addEventListener('click', async () => {
const videoBlob = await vc.getScreenshotsSequence({
numOfFrames: 96,
format: MediaFormat.VIDEO,
// codec: 'vp9'
}) as Blob;
const video = document.createElement('video');
video.autoplay = true;
video.muted = true;
video.loop = true;
document.body.appendChild(video);
const 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;
}, false);
let exportModel = document.getElementById('export') as HTMLElement;
exportModel.addEventListener('click', async () => {
const data = await vc.expotModel({
compressPNG: false,
downloadFile: true,
type: ExportFileType.GLB
});
console.log(data);
}, false);
const applyMaterial = async (material: MaterializeMeshConfig) => {
await vc.onModelLoaded();
let meshes = await vc.getMeshesData();
for (let name in meshes) {
vc.materializeMesh(name, material);
}
};
const 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>;
const 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'
}
] as Array<IConfiguration>;
// 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') as HTMLElement).addEventListener('click', async () => {
vc.configurator.setConfigurator(config);
config.forEach((c, i) => vc.configurator.preloadConfigurator(c, (i + 1) * 2000));
vc.configurator.toggleConfiguratorUI(true);
}, false);
(document.getElementById('configurator-select') as HTMLElement).addEventListener('change', async (e: Event) => {
vc.configurator.selectConfigurator(parseInt((e.target as HTMLSelectElement).value));
wireframeState = false;
});
(document.getElementById('pic-in-pic') as HTMLElement).addEventListener('click', async () => {
vc.togglePicInPic(!!!(document as any).pictureInPictureElement);
}, false);
(document.getElementById('webxr') as HTMLElement).addEventListener('click', async () => {
if (await vc.isWebXrSupported())
vc.toggleWebXR(true, true);
else
alert('This browser doesn\'t support WebXR');
}, false);
(document.getElementById('collision-init') as HTMLElement).addEventListener('click', async () => {
await vc.onModelLoaded();
vc.toggleCollision(true, '#ff0000');
const c = await vc.waitForCollisions();
console.log(c);
}, false);
(document.getElementById('preset') as HTMLElement).addEventListener('click', async () => {
vc.applyPreset({
hdri: {
background: true,
blur: false,
format: 'hdr',
intensity: 1,
type: 9
}
} as any);
}, false);
(document.getElementById('sync-clock') as HTMLElement).addEventListener('click', async () => {
const md = await vc.getMeshesData();
const min = 'Arrow_Min', sec = 'Arrow_Sec', hour = 'Arrow_Hr';
const syncClock = () => {
setTimeout(syncClock.bind(this), 1000);
const now = new Date();
let 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();
}, false);
};
initConfigurator();
const applyTexture = async () => {
await vc.onModelLoaded();
vc.applyTexture({
mapType: 'map',
materialName: 'Display_MAT',
mimeType: TextureMimeType.VIDEO,
src: '#video'
});
};
(document.getElementById('apply-texture') as HTMLElement).addEventListener('click', async () => {
applyTexture();
});
(document.getElementById('hide-buttom') as HTMLElement).addEventListener('click', async () => {
hideButtom = !hideButtom;
vc.toggleHideBottom(hideButtom);
});
document.getElementById('file').addEventListener('change', (event: any) => {
vc.displayFiles(event.target.files);
}, false);
vc.getBoundingBox().then((b: IBoundingBox) => {
console.log(b);
});
})();