Three.js WebGLRenrerered видео не воспроизводятся на телефонах Android
Приведенный ниже пример текстур видео, похоже, не работает на телефоне Android Nexus LG, хотя все другие примеры не видео работают, включая пример youtube на three.js.
У кого-нибудь еще есть эта проблема? Я пытаюсь визуализировать видео с помощью THREE.WebGLRenderer, чтобы в конечном итоге я мог использовать стереоэффект с ним, чтобы использовать его с комплектом VR (например, Google картон). Пока что на телефоне работают только видео с CSS3DRenderer/Canvas. Но я не могу использовать эти средства визуализации, потому что стереоэффект не работает с этими средствами визуализации (т.е. effect = new THREE.StereoEffect (renderer);)
http://mrdoob.github.io/three.js/examples/webgl_materials_video.html
Пожалуйста, дайте мне знать, если есть, чтобы получить видео рендеринга со стерео эффектом.
ОБНОВЛЕНИЕ --------------- КОД НА РУКАХ (адаптировано с http://stemkoski.github.io/Three.js/Video.html)
<!doctype html>
<html lang="en">
<head>
<title>Video Texture (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- <link rel=stylesheet href="css/base.css"/> -->
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/effects/StereoEffect.js"></script>
<div id="ThreeJS"></div>
<script>
var container, scene, camera, renderer, controls, stats, effect, element;
var video, videoImage, videoImageContext, videoTexture;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer( {antialias:true} );
//effect = new THREE.StereoEffect(renderer);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
element= renderer.domElement;
//effect.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( element );
// CONTROLS
controls = new THREE.OrbitControls( camera, element );
element.addEventListener('click', fullscreen, false);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
///////////
// VIDEO //
///////////
// create the video element
video = document.createElement( 'video' );
//video.id = 'video';
video.type = ' video/mp4; codecs="theora, vorbis" ';
video.src = "video/sintel.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement( 'canvas' );
videoImage.width = 320;
videoImage.height = 240;
videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );
videoTexture = new THREE.Texture( videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );
// the geometry on which the movie will be displayed;
// movie image will be scaled to fit these dimensions.
var movieGeometry = new THREE.PlaneGeometry( 240, 100, 4, 4 );
var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
movieScreen.position.set(0,50,00);
scene.add(movieScreen);
camera.position.set(0,150,300);
camera.lookAt(movieScreen.position);
window.addEventListener('resize', resize, false);
setTimeout(resize, 1);
}
function update() {
resize();
camera.updateProjectionMatrix();
controls.update();
}
function animate()
{
requestAnimationFrame( animate );
render();
//update();
}
function fullscreen() {
video.play();
console.log(video);
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
}
function resize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
//console.log(container, width,height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
//effect.setSize(width, height);
}
function render()
{
if ( video.readyState === video.HAVE_ENOUGH_DATA )
{
videoImageContext.drawImage( video, 0, 0 );
if ( videoTexture )
videoTexture.needsUpdate = true;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
1 ответ
На мобильных устройствах видео не воспроизводится, если не инициировано действием пользователя. Так что если вы выполните init метод из mousedown слушатель событий это должно работать.