0
我试图添加标记一个阿尔法视频o只是与threejs和JSARtoolkit视频，对象工作正常，但是当我尝试与一个.mov相机停止，并没有在控制台上的错误。JsARtoolkit阿尔法视频
我正在追踪这个教程添加视频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();
}