<aside> 💡 Description: Example of Tetavi Volumetric Video integration into 3D scene
</aside>
Create World AR Scene
Add an empty object to the scene:
Open Full-screen viewer and click on “{}” icon in the assets list to open Custom Code Editor
Add the following code:
console.log(this);
// this function will work cross-browser for loading scripts asynchronously
const loadScript = (_name, src, callback) => {
let s;
let r;
let t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
s.onload = s.onreadystatechange = () => {
// console.log( this.readyState ); //uncomment this line to see which ready states are called.
if (!r && (!this.readyState || this.readyState == 'complete')) {
r = true;
callback(_name);
}
};
t = document.getElementsByTagName('script')[ 0 ];
t.parentNode.insertBefore(s, t);
}
// After all necessary scripts loaded
const onLoadScript = (_name) => {
if (_name == 'tetavi') {
// Dencers model
const manifest = {
'version': 1.0,
'fps': 30,
'frameCount': 300,
'width': 4096,
'height': 256,
'maxIndicesCount' : 38070,
'gopChunks' : [
{ 'from':0, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_0.tvm>' },
{ 'from':38, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_1.tvm>' },
{ 'from':68, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_2.tvm>' },
{ 'from':95, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_3.tvm>' },
{ 'from':120, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_4.tvm>' },
{ 'from':140, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_5.tvm>' },
{ 'from':158, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_6.tvm>' },
{ 'from':176, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_7.tvm>' },
{ 'from':196, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_8.tvm>' },
{ 'from':215, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_9.tvm>' },
{ 'from':233, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_10.tvm>' },
{ 'from':252, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_11.tvm>' },
{ 'from':273, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_12.tvm>' },
{ 'from':294, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/gop_tvm_13.tvm>' },
],
'posChunks' : [
{ 'from':0, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/position_tvm_0.tvm>' },
{ 'from':84, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/position_tvm_1.tvm>' },
{ 'from':181, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/position_tvm_2.tvm>' },
{ 'from':283, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1634729844/Tetavi/tvm/position_tvm_3.tvm>' },
]
};
const videoTex = '<https://geenee.ar/cdn/tetavi/texturesVideo.mp4>';
// Roller model
// const manifest = {
// 'version': 1.0,
// 'fps': 30,
// 'frameCount': 229,
// 'width': 4096,
// 'height': 256,
// 'maxIndicesCount' : 36843,
// 'gopChunks' : [
// { 'from':0, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/gop_tvm_0.tvm>' },
// { 'from':82, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/gop_tvm_1.tvm>' },
// { 'from':102, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/gop_tvm_2.tvm>' },
// { 'from':121, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/gop_tvm_3.tvm>' },
// { 'from':148, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/gop_tvm_4.tvm>' }
// ],
// 'posChunks' : [
// { 'from':0, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/position_tvm_0.tvm>' },
// { 'from':84, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/position_tvm_1.tvm>' },
// { 'from':168, 'filename' : '<https://res.cloudinary.com/dwch43ppl/raw/upload/v1639525679/Tetavi/redbull/position_tvm_2.tvm>' }
// ]
// };
// const videoTex = '<https://res.cloudinary.com/dwch43ppl/video/upload/v1639525685/Tetavi/redbull/texturesVideo.mp4>';
const loader = document.getElementById('preloader');
loader.classList.remove('preloader--loaded');
const setBar = (width, widthPlay) => {
const loaderProgress = `${100 * (widthPlay / width)}%`
// if (widthPlay / width <= 99.99) console.log(loaderProgress, '%');
// console.log(widthPlay / width);
// if ((widthPlay / width) >= 95) {
// loader.classList.add('preloader--loaded');
// }
if (tetaviLoader.isReady()) {
loader.classList.add('preloader--loaded');
}
}
// Setup Tetavi with options
const tetaviLoader = Tetavi.create(this.activeSceneModel.renderer,
this.activeSceneModel.camera,
videoTex,
manifest)
.onSetBar(setBar)
.setFadeAlpha(false)
.setShadowAngle(0.4);
// .onLog(onLog)
// .onPerform(onPerform);
// Upload tetavi source, get 3D mesh and anable shadows
const tetaviMesh = tetaviLoader.getScene();
// run tetavi only after user placed the model, because videostream needs user interaction.
const wrapper = this.activeSceneModel.scene.getObjectByName('SceneWrapper');
wrapper.scale.set(0, 0, 0);
this.activeSceneModel.$parent.emitter.addListener('geenee-model-placed', () => {
wrapper.material.opacity = 0; // make sure the cube is transparent
wrapper.castShadow = false; // make sure the cube cast no shadow
tetaviLoader.play(); // begin playback
wrapper.add(tetaviMesh);
setTimeout(() => {
wrapper.scale.set(1, 1, 1);
}, 1000);
});
const render = () => {
tetaviLoader.animate()
};
// Reassign to Geenee Render Loop
this.activeSceneModel.userCallbacks.onRender = render;
}
}
// loadScript('three', '<https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js>', () => console.log('threeeee'));
loadScript('tetavi', '<https://webplayer-test-1.az.tetavidemo.click/Version_2_0_0/TetaviBundle_three_0_133_1.js>', onLoadScript);
// loadScript('tetavi', '<https://webplayer-test-1.az.tetavidemo.click/Version_1_3_1_1/TetaviBundle.js>', onLoadScript);