Question

下面的视频纹理示例似乎不适用于Android LG nexus手机，尽管所有其他非视频示例的工作包括在three.js上的youtube示例。

有没有其他人有这个问题？我正在尝试使用THREE.WebGLRenderer渲染视频，这样我最终可以使用立体声效果将它与VR（如谷歌纸板）套件一起使用。到目前为止，只有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>

Answer 1

在移动设备上，除非通过用户操作启动，否则视频不会播放。因此，如果您从init事件侦听器执行mousedown方法，它应该可以工作。

Samsung.js WebGLRenderered视频无法在Android手机上播放

1 个答案: