1

getusermedia から three.js のプレーンにビデオを描画しようとしています。しかし、ビデオは描かれていません。Web カメラへのアクセスを拒否すると、画像が読み込まれ、ビデオの代わりに描画されます。画像の読み込みと描画は問題ありません。誰が私が間違っているのか教えてもらえますか?

// ----------------------------------------------
// 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

最近似たようなことを試してみたところ、このバグに遭遇しました。これは、ビデオ サイズが 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 に答える
0

これをレンダリング ループに追加する必要があります。

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

    if ( backgroundTexture ) backgroundTexture.needsUpdate = true;

}
于 2012-07-25T10:19:03.707 に答える