paullaffitte · November 28, 2019 06:35
diff --git a/three-js-oculus-go-bug.html b/three-js-oculus-go-bug.html
 <!DOCTYPE html>
 <html>
 	<body>

 		<div class="player">
 			<canvas></canvas>
 			<video src="https://threejs.org/examples/textures/MaryOculus.webm" loop autoplay crossOrigin="" controls="false" style="display: none;"></video>
 		</div>
 		<canvas id="texture-canvas" width="500" height="100" style="display: none;"></canvas>

 		<label>Bug enabled: <input id="toggle-bug" type="checkbox"></label>

 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

 		<script type="module">
 			import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.module.js';
 			import { WEBVR } from 'https://threejs.org/examples/jsm/vr/WebVR.js';

 			// Just a hello world canvas that will be used as a texture
 			const textureCanvas = $('#texture-canvas').get(0);
 			const ctx = textureCanvas.getContext('2d');
 			ctx.fillStyle = 'white';
 			ctx.fillRect(0, 0, textureCanvas.width, textureCanvas.height);
 			ctx.fillStyle = 'black';
 			ctx.font = '30px Arial';
 			ctx.fillText('Hello world', 20, 60);

 			// Listen change on the checkbox to enable/disable the bug
 			let bugEnabled = false;
 			$('#toggle-bug').on('change', e => {
 				bugEnabled = $(e.target).prop('checked');
 			}).click();
 			const _update = THREE.VideoTexture.prototype.update;
 			THREE.VideoTexture.prototype.update = function() {
 				if (bugEnabled)
 					_update.call(this);
 			};

 			// The player class that contain a video and an "UI" from a canvas texture
 			class Player {
 				constructor() {
 					const $player = $('div.player');
 					const videoElement	= $player.find('video').get(0);

 					this.scene		= new THREE.Scene();
 					this.camera		= new THREE.PerspectiveCamera( 70, 0.5, .1, 1000 );
 					this.renderer	= new THREE.WebGLRenderer({ canvas: $player.find('canvas').get(0) });

 					this.scene.add(this.camera);
 					this.scene.background = new THREE.Color( 'green' );

 					this.renderer.setPixelRatio( window.devicePixelRatio );
 					this.renderer.vr.enabled = true;

 					this.addUI(textureCanvas);

 					this.addEnterVRButton(videoElement);
 					this.addVideo(videoElement);

 					window.addEventListener('vrdisplayconnect', () => this.renderer.vr.setDevice(e.display));
 					this.renderer.setAnimationLoop(() => this.renderer.render(this.scene, this.camera));
 				}

 				addEnterVRButton(videoElement) {
 					const enterVRButton = $(document.body.appendChild(WEBVR.createButton(this.renderer)));
 					console.log(videoElement, videoElement.play);
 					enterVRButton.on('click', () => videoElement.play());
 				}

 				addVideo(videoElement) {
 					const geometry		= new THREE.SphereGeometry(1000, 32, 32);
 					const texture		= new THREE.VideoTexture(videoElement);

 					geometry.scale( -1, 1, 1 );

 					texture.minFilter	= THREE.LinearFilter;
 					texture.magFilter	= THREE.LinearFilter;
 					texture.wrapS		= THREE.ClampToEdgeWrapping;
 					texture.wrapT		= THREE.ClampToEdgeWrapping;
 					texture.format		= THREE.RGBFormat;

 					this.scene.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture})));
 				}

 				addUI(canvas) {
 					const geometry = new THREE.PlaneGeometry(50,  10);
 					const texture = new THREE.CanvasTexture(canvas);
 					const material = new THREE.MeshBasicMaterial({ map: texture });
 					const mesh = new THREE.Mesh(geometry, material);

 					mesh.position.set(0, 0, -100);

 					texture.minFilter = THREE.LinearFilter;
 					texture.magFilter = THREE.LinearFilter;
 					texture.wrapS = THREE.ClampToEdgeWrapping;
 					texture.wrapT = THREE.ClampToEdgeWrapping;
 					texture.format = THREE.RGBFormat;
 					texture.generateMipmaps = false;

 					this.scene.add(mesh);
 				}
 			}

 			new Player();

 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>

	<div class="player">
	<canvas></canvas>
	<video src="https://threejs.org/examples/textures/MaryOculus.webm" loop autoplay crossOrigin="" controls="false" style="display: none;"></video>
	</div>
	<canvas id="texture-canvas" width="500" height="100" style="display: none;"></canvas>

	<label>Bug enabled: <input id="toggle-bug" type="checkbox"></label>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

	<script type="module">
	import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.module.js';
	import { WEBVR } from 'https://threejs.org/examples/jsm/vr/WebVR.js';

	// Just a hello world canvas that will be used as a texture
	const textureCanvas = $('#texture-canvas').get(0);
	const ctx = textureCanvas.getContext('2d');
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, textureCanvas.width, textureCanvas.height);
	ctx.fillStyle = 'black';
	ctx.font = '30px Arial';
	ctx.fillText('Hello world', 20, 60);

	// Listen change on the checkbox to enable/disable the bug
	let bugEnabled = false;
	$('#toggle-bug').on('change', e => {
	bugEnabled = $(e.target).prop('checked');
	}).click();
	const _update = THREE.VideoTexture.prototype.update;
	THREE.VideoTexture.prototype.update = function() {
	if (bugEnabled)
	_update.call(this);
	};

	// The player class that contain a video and an "UI" from a canvas texture
	class Player {
	constructor() {
	const $player = $('div.player');
	const videoElement = $player.find('video').get(0);

	this.scene = new THREE.Scene();
	this.camera = new THREE.PerspectiveCamera( 70, 0.5, .1, 1000 );
	this.renderer = new THREE.WebGLRenderer({ canvas: $player.find('canvas').get(0) });

	this.scene.add(this.camera);
	this.scene.background = new THREE.Color( 'green' );

	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.vr.enabled = true;

	this.addUI(textureCanvas);

	this.addEnterVRButton(videoElement);
	this.addVideo(videoElement);

	window.addEventListener('vrdisplayconnect', () => this.renderer.vr.setDevice(e.display));
	this.renderer.setAnimationLoop(() => this.renderer.render(this.scene, this.camera));
	}

	addEnterVRButton(videoElement) {
	const enterVRButton = $(document.body.appendChild(WEBVR.createButton(this.renderer)));
	console.log(videoElement, videoElement.play);
	enterVRButton.on('click', () => videoElement.play());
	}

	addVideo(videoElement) {
	const geometry = new THREE.SphereGeometry(1000, 32, 32);
	const texture = new THREE.VideoTexture(videoElement);

	geometry.scale( -1, 1, 1 );

	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.wrapS = THREE.ClampToEdgeWrapping;
	texture.wrapT = THREE.ClampToEdgeWrapping;
	texture.format = THREE.RGBFormat;

	this.scene.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture})));
	}

	addUI(canvas) {
	const geometry = new THREE.PlaneGeometry(50, 10);
	const texture = new THREE.CanvasTexture(canvas);
	const material = new THREE.MeshBasicMaterial({ map: texture });
	const mesh = new THREE.Mesh(geometry, material);

	mesh.position.set(0, 0, -100);

	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.wrapS = THREE.ClampToEdgeWrapping;
	texture.wrapT = THREE.ClampToEdgeWrapping;
	texture.format = THREE.RGBFormat;
	texture.generateMipmaps = false;

	this.scene.add(mesh);
	}
	}

	new Player();

	</script>
	</body>
	</html>