0

我正在尝试在标记上添加一个 alpha 视频，或者只是一个带有threejs 和 JSARtoolkit 的视频，这些对象工作正常，但是当我尝试使用 .mov 时，相机停止并且在控制台上没有错误。

我正在按照本教程添加视频https://makc3d.wordpress.com/2014/04/01/transparent-video-texture-in-three-js/

脚本 - JS 三。 

meshes = [];
mixers = []; 
var hemisphereLight; 
var pointLight; 
var camera; var controls;
var clock = new THREE.Clock;
window.ARThreeOnLoad = function() {
ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat', 
onSuccess: function(arScene, arController, arCamera) {

    _arsc   = arScene;
    _arcon  = arController;
    _arcam  = arCamera;

    document.body.className = arController.orientation;

    var renderer = new THREE.WebGLRenderer({antialias: true});
    if (arController.orientation === 'portrait') {
        var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth;
        var h = window.innerWidth + 100;
        renderer.setSize(w, h);
        renderer.domElement.style.paddingBottom = (w-h) + 'px';
    } else {
        if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) {
            renderer.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight);
        } else {
            renderer.setSize(arController.videoWidth, arController.videoHeight);
            document.body.className += ' desktop';
        }
    }

    document.body.insertBefore(renderer.domElement, document.body.firstChild);

    var tick = function() {
        arScene.process();
        arScene.renderOn(renderer);
        requestAnimationFrame(tick);
    };
    tick();


ChromaKeyMaterial = function (url, width, height, keyColor) {
THREE.ShaderMaterial.call(this);

video = document.createElement('video');
video.loop = true;
video.src = url;
video.load();
video.play();

var videoImage = document.createElement('canvas');
if (window["webkitURL"]) document.body.appendChild(videoImage);
videoImage.width = width;
videoImage.height = height;

var keyColorObject = new THREE.Color(keyColor);

var videoImageContext = videoImage.getContext('2d');
// background color if no video present
videoImageContext.fillStyle = '#' + keyColorObject.getHexString();
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);

var videoTexture = new THREE.Texture(videoImage);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

this.update = function () {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        videoImageContext.drawImage(video, 0, 0);
        if (videoTexture) {
            videoTexture.needsUpdate = true;
        }
    }
}

this.setValues({

    uniforms: {
        texture: {
            type: "t",
            value: videoTexture
        },
        color: {
            type: "c",
            value: keyColorObject
        }
    },
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,

    transparent: true
});
}

ChromaKeyMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype);



// var camera = new THREE.PerspectiveCamera();
// camera.position.set(0, 150, 900);
// camera.lookAt(scene.position);
// scene.add(camera);

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xffffff);
// document.getElementById('demo').appendChild(renderer.domElement);

// var controls = new THREE.OrbitControls(camera, renderer.domElement);



var movieMaterial = new ChromaKeyMaterial('video_video.mov', 242, 421, 0xd400);
var movieGeometry = new THREE.PlaneGeometry(60, 105, 4, 4);

var girls = []
for (var i = 0; i < 5; i++)
    for (var j = 0; j < 5; j++)
        if ((i + j) % 2 == 0) {
            var movie = new THREE.Mesh(movieGeometry, movieMaterial);
            movie.position.set(0, 53, 0);

            var girl = new THREE.Object3D();
            girl.position.set(150 * (i - 2), 0, 150 * (j - 2));

            girl.add(movie);
            arController.loadMarker('Data/patt.hiro', function(markerId) {
                markerRoot = arController.createThreeMarker(markerId);
                markerRoot.add(girl);
                // arScene.scene.add(camera);
                arScene.scene.add(markerRoot);
            });

            girls.push(girl);
        }


// animate
var animate = function () {
    // controls.update();

    movieMaterial.update();

    requestAnimationFrame(animate);
}

animate();
}});

delete window.ARThreeOnLoad;

};

if (window.ARController && ARController.getUserMediaThreeScene) {
ARThreeOnLoad();
}
4

1 回答 1

0

Android 设备不允许使用 .mov 文件，请使用 mp4。为了透明度，我使用 Unity 和 Vuforia 为移动设备完成了 AR，资产是“特殊视频”和使用“luma cut”的着色器。 Vuforia：可以在 iOS 中播放带有 alpha 的电影纹理吗？ 我也这样做了，并在这篇文章中为处理进行了解释：处理中的带有 alpha 通道的视频 希望足够清晰，祝你好运！

于 2017-05-15T22:36:31.550 回答