javascript - getusermedia 视频未绘制在 Three.js 平面上

标签 javascript html5-video three.js

我尝试将 getusermedia 中的视频绘制到 Three.js 中的平面中。但视频没有画出来。当我拒绝网络摄像头访问时,会加载并绘制图片而不是视频。加载和绘制图片是没有问题的。谁能告诉我我做错了什么?

// ----------------------------------------------
// global variables

var PI=3.1415;

var WIDTH=window.innerWidth,
    HEIGHT=480;

var FOV=45,
    ASPECT=WIDTH/HEIGHT,
    NEAR=1,
    FAR=10000;

var camera,
    scene,
    renderer,
    video,
    backgroundTexture;

// ----------------------------------------------
// 

// function for onload
function load() {
    init();
}

// ----------------------------------------------
// functions

function init() {   
    if(navigator.webkitGetUserMedia) {
        video = document.createElement('video');
        document.body.appendChild(video);
        navigator.webkitGetUserMedia({video:true},function(stream) {
                video.src=window.webkitURL.createObjectURL(stream);
                //video.src=webkitURL.createObjectURL(stream);

                video.autoplay=true;

                // create texture of the video stream
                backgroundTexture = new THREE.Texture(video);

                setupScene();
            },
            function(error){
                console.log("Faild to get a stream due to", error)
                loadAlternativlyBackground();
                setupScene();
        });


    }
    else {
        loadAlternativlyBackground();
        setupScene();
    }
}

function setupScene() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( FOV, ASPECT, NEAR, FAR );
    camera.position.z = 500;

    //scene.add(new THREE.AmbientLight(0x555555));

    scene.add(camera);

    var material = new THREE.MeshBasicMaterial({map:backgroundTexture});

    var plane = new THREE.Mesh(new THREE.PlaneGeometry(WIDTH,HEIGHT),material);

    plane.rotation.x=PI/2;

    plane.material.depthTest = false;
    plane.material.depthWrite = false;

    scene.add(plane);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( WIDTH, HEIGHT );
    renderer.autoClear = false;
    document.body.appendChild( renderer.domElement );

    animate();
}

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
        if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
            if ( backgroundTexture ) backgroundTexture.needsUpdate = true;
        }
    renderer.clear();
    renderer.render( scene, camera );
}

function loadAlternativlyBackground() {
    // load alternativly background
    backgroundTexture = THREE.ImageUtils.loadTexture('p/background.png');
}

最佳答案

您需要将其添加到渲染循环中:

if ( video.readyState === video.HAVE_ENOUGH_DATA ) {

    if ( backgroundTexture ) backgroundTexture.needsUpdate = true;

}

关于javascript - getusermedia 视频未绘制在 Three.js 平面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11639380/

相关文章:

html - Chrome 在播放 Rackspace 云文件中的视频时死机

ffmpeg - 为什么这个 mp4 不再在 video-js <video> 标签中播放

javascript - 如何检测两个球体对象的交集以避免彼此重叠?

javascript - 使用 Three.js 中的箭头键围绕对象旋转相机

javascript - 将类添加到包含 innerHTML 字符串的 div

javascript - jquery 值不更新

javascript - 在提交表单的 div 中显示消息

PHP 标签中的 JavaScript 确认框不断返回 TRUE

google-chrome - 更改Chrome中的默认html5视频播放器

javascript - 在 THREE.js 中的多个 Line 对象上使用 GeometryUtils.merge