1

我尝试将 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');
}
4

2 回答 2

0

您需要将此添加到渲染循环：

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

    if ( backgroundTexture ) backgroundTexture.needsUpdate = true;

}
于 2012-07-25T10:19:03.707 回答
0

我最近尝试了类似的事情并遇到了这个错误，这与视频大小不是 2 的幂有关。（我认为 Chrome 的控制台中对我有警告。）http://code.google.com/p/chromium/issues/detail?id=100525

也许您遇到了同样的错误？

为了解决这个问题，我将视频渲染到画布上，然后使用画布作为纹理：

//part of init function
    canvas = $("canvas#videoCanvas")[0];
    canvasContext = canvas.getContext("2d");
//part of render
    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    canvasContext.drawImage(video, 0, 0,video.videoWidth, video.videoHeight);
//and finally replace this
    backgroundTexture = new THREE.Texture(video);
//with this
    backgroundTexture = new THREE.Texture(canvas);
于 2012-10-01T11:34:49.510 回答