Three.js webglrendered视频不'；我不能在安卓手机上玩
下面的视频纹理示例似乎不适用于android LG nexus手机，尽管所有其他非视频示例都适用，包括three.js上的youtube示例 还有其他人有这个问题吗？我正在尝试使用THREE.WebGLRenderer来渲染视频，这样我最终可以使用立体效果来使用VR（比如谷歌硬纸板）工具包。到目前为止，只有CSS3DRenderer/Canvas渲染的视频似乎可以在手机上使用。但是我不能使用这些渲染器，因为立体效果不能与这些渲染器一起使用（即effect=new THREE.StereoEffect（渲染器）；） 请让我知道，如果有得到视频渲染立体效果 更新------------------现有代码（改编自）Three.js webglrendered视频不'；我不能在安卓手机上玩,three.js,html5-video,nexus-4,Three.js,Html5 Video,Nexus 4,下面的视频纹理示例似乎不适用于android LG nexus手机，尽管所有其他非视频示例都适用，包括three.js上的youtube示例 还有其他人有这个问题吗？我正在尝试使用THREE.WebGLRenderer来渲染视频，这样我最终可以使用立体效果来使用VR（比如谷歌硬纸板）工具包。到目前为止，只有CSS3DRenderer/Canvas渲染的视频似乎可以在手机上使用。但是我不能使用这些渲染器，因为立体效果不能与这些渲染器一起使用（即effect=new THREE.StereoEffe
视频纹理（Three.js）
变量容器、场景、摄影机、渲染器、控件、统计信息、效果、元素；
var视频、视频图像、视频图像上下文、视频纹理；
init（）；
制作动画（）；
//功能
函数init（）
{
//场面
场景=新的三个。场景（）；
//摄像机
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=屏幕宽度/屏幕高度，近=0.1，远=20000；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
场景。添加（摄影机）；
相机位置设置（0150400）；
摄像机。注视（场景。位置）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
//效果=新的三个。立体效果（渲染器）；
设置大小（屏幕宽度、屏幕高度）；
元素=renderer.doElement；
//效果。设置大小（屏幕宽度、屏幕高度）；
container=document.getElementById（'ThreeJS'）；
container.appendChild（元素）；
//控制
控件=新的三个控件（摄影机、元素）；
元素。addEventListener（'click'，全屏，false）；
//轻的
var灯=新的三点灯（0xffffff）；
光。位置。设置（0250,0）；
场景。添加（灯光）；
///////////
//录像带//
///////////
//创建视频元素
video=document.createElement（'video'）；
//video.id='video'；
video.type='video/mp4；codecs=“theora，vorbis”'；
video.src=“video/sintel.ogv”；
video.load（）；//设置/更改源后必须调用
video.play（）；
videoImage=document.createElement（'canvas'）；
videoImage.width=320；
videoImage.height=240；
videoImageContext=videoImage.getContext（'2d'）；
//如果没有视频，则为背景色
videoImageContext.fillStyle='#000000'；
videoImageContext.fillRect（0,0，videoImage.width，videoImage.height）；
videoTexture=新的三种纹理（videoImage）；
videoTexture.minFilter=THREE.LinearFilter；
videoTexture.magFilter=THREE.LinearFilter；
var movieMaterial=new THREE.MeshBasicMaterial（{map:videoTexture，overdraw:true，side:THREE.DoubleSide}）；
//电影将在其上显示的几何体；
//电影图像将缩放以适应这些尺寸。
var movieGeometry=新的三个平面几何（240、100、4、4）；
var movieScreen=新的三网格（movieGeometry、movieMaterial）；
电影屏幕位置设置（0,50,00）；
场景。添加（电影屏幕）；
相机位置设置（0150300）；
摄像机。注视（电影屏幕。位置）；
addEventListener（'resize'，resize，false）；
设置超时（调整大小，1）；
}
函数更新（）{
调整大小（）；
camera.updateProjectMatrix（）；
控件更新（）；
}
函数animate（）
{
请求动画帧（动画）；
render（）；
//更新（）；
}
函数全屏（）{
video.play（）；
console.log（视频）；
if（container.requestFullscreen）{
container.requestFullscreen（）；
}else if（container.msRequestFullscreen）{
container.msRequestFullscreen（）；
}else if（container.mozRequestFullScreen）{
container.mozRequestFullScreen（）；
}else if（container.webkitRequestFullscreen）{
container.webkitRequestFullscreen（）；
}
}
函数resize（）{
变量宽度=container.offsetWidth；
var高度=容器离地高度；
//控制台。原木（容器、宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
设置大小（宽度、高度）；
//效果。设置大小（宽度、高度）；
}
函数render（）
{
if（video.readyState==video.HAVE\u足够的\u数据）
{
videoImageContext.drawImage（视频，0,0）；
if（视频纹理）
videoTexture.needsUpdate=
<!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>