The video texture example below does not seem to work on android LG nexus phone although all other non video examples work including the youtube example on three.js.
下面的视频纹理示例似乎并没有在android LG nexus手机上运行，尽管所有其他的非视频示例都在运行，包括youtube上的三个例子。
Does anyone else have this issue? I am trying to render video using THREE.WebGLRenderer so that I can ultimately use stereo effect with it to use it with VR (like google cardboard) kit. So far only CSS3DRenderer/Canvas rendered videos seem to work on the phone. But I can't use these renderers because stereo effect does not work with these renderers (i.e effect = new THREE.StereoEffect(renderer);)
有人有这个问题吗?我正在尝试用三个来渲染视频。WebGLRenderer让我最终可以使用它的立体声效果和VR(像谷歌硬纸板)工具包。到目前为止，只有CSS3DRenderer/Canvas渲染的视频在手机上有效。但是我不能使用这些渲染器，因为立体声效果不适用于这些渲染器(I)。e效应=新的立体效应(渲染器);
http://mrdoob.github.io/three.js/examples/webgl_materials_video.html
http://mrdoob.github.io/three.js/examples/webgl_materials_video.html
Please let me know if there is to get videos render with stereo effect.
请告诉我是否有立体效果的视频渲染。
UPDATE---------------CODE ON HAND (Adapted from http://stemkoski.github.io/Three.js/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 个解决方案
#1
1
On mobile devices videos don't play unless initiated from a user action. So if you execute the init method from a mousedown event listener it should work.
在移动设备上，视频不会播放，除非是由用户发起的。因此，如果您从一个mousedown事件监听器执行init方法，它应该可以工作。
#1
1
On mobile devices videos don't play unless initiated from a user action. So if you execute the init method from a mousedown event listener it should work.
在移动设备上，视频不会播放，除非是由用户发起的。因此，如果您从一个mousedown事件监听器执行init方法，它应该可以工作。