<aside> 💡 Description: Creating the illusion of VR by add dynamic video to 360 sphere as texture and fix scene to the camera position.

</aside>

Example: https://flowcode.com/p/Kq54NBZ3F

Image from iOS (3).MP4

1. Add **Sphere .**glb file to the scene:

   sphere360.glb

2. Open custom code {}

3. Insert the following code snippet:

// Take a mesh which we want to cover with video
// const videoMesh = this.object3D;
const videoMesh = this.activeSceneModel.getObjectByName('Sphere');
videoMesh.scale.y = -1;
videoMesh.rotation.y = -Math.PI / 2;

// Create HTML <video> element
const video = document.createElement('video');

// Assign video source
video.src = '<https://eu-central-1-staging-cms-01-attachments-upload.geenee.io/attachments/d1aab350-3b20-41d2-ad77-19219b3920f0/video360.mp4>';
video.loop = true;
// make sure it is MUTE if you want it autoplay. 
// Othervise you need to .play() it after user click 
// (see 'geenee-model-placed' event)
video.muted = true;
video.autoplay = false;
video.playsinline = true;
video.crossOrigin = 'Anonymous';
video.setAttribute('loop', 'true');
video.setAttribute('muted', 'true');
video.setAttribute('autoplay', 'false');
video.setAttribute('playsinline', 'true');

// Create THREE Video texture object
const videoTexture = new THREE.VideoTexture( video );

// Assign Texture as a material map
videoMesh.material.map = videoTexture;

// Optional: Play video  in case you want to have sound or start it only after user placed the model.
this.activeSceneModel.$parent.emitter.addListener('geenee-model-placed', () => {
	video.play();
	window.video360 = video;
});

// Keep matrix group (scene) on the same distance from camera (turn off 6dof).
const matrixGroup = this.activeSceneModel.getObjectByName('geenee-3d-matrix-target-group');
const render = () => { 
	matrixGroup.position.set(0, 0, 0) 
	matrixGroup.scale.set(1, 1, 1);
}
this.activeSceneModel.userCallbacks.onRender = render;
// disable gesture rotation/scale/translate
this.activeSceneModel.setGestureOption('gestureOn', false);

Optional: Get video src from URL parameter

// Assign video source from url
const urlParams = new URLSearchParams(window.location.search);
const videoName = urlParams.get("vn");
video.src = `https://your-source-url/${videoName}.mp4`;