0
아래 비디오 텍스처 예제는 안드로이드 LG nexus phone에서 작동하지 않습니다. 다른 모든 비 비디오 예제는 three.js의 youtube 예제를 포함하여 작동합니다.Three.js WebGLRenderered 비디오가 안드로이드 폰에서 재생되지 않습니다.
누구든지이 문제가 있습니까? 나는 VR (예 : Google 골판지) 키트와 함께 사용할 수 있도록 스테레오 효과를 궁극적으로 사용할 수 있도록 THREE.WebGLRenderer를 사용하여 비디오를 렌더링하려고합니다. 지금까지 CSS3DRenderer/Canvas 렌더링 된 비디오 만 전화기에서 작동하는 것 같습니다. 비디오 렌더링 얻을 수있는 경우
http://mrdoob.github.io/three.js/examples/webgl_materials_video.html
은 알려 주시기 바랍니다 (예 : 효과 = 새로운 THREE.StereoEffect (렌더러)) 스테레오 효과가이 렌더러 작동하지 않기 때문에 그러나 나는이 렌더러를 사용할 수 없습니다 스테레오 효과. --------------- 코드가 손 (http://stemkoski.github.io/Three.js/Video.html에서 적응)
UPDATE 사용자 작업에서 시작하지 않는 한 동영상이 재생되지 않는 모바일 기기에
<!doctype html>
<html lang="en">
<head>
<title>Video Texture (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- <link rel=stylesheet href="css/base.css"/> -->
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/effects/StereoEffect.js"></script>
<div id="ThreeJS"></div>
<script>
var container, scene, camera, renderer, controls, stats, effect, element;
var video, videoImage, videoImageContext, videoTexture;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true});
//effect = new THREE.StereoEffect(renderer);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
element= renderer.domElement;
//effect.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById('ThreeJS');
container.appendChild(element);
// CONTROLS
controls = new THREE.OrbitControls(camera, element);
element.addEventListener('click', fullscreen, false);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
///////////
// VIDEO //
///////////
// create the video element
video = document.createElement('video');
//video.id = 'video';
video.type = ' video/mp4; codecs="theora, vorbis" ';
video.src = "video/sintel.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement('canvas');
videoImage.width = 320;
videoImage.height = 240;
videoImageContext = videoImage.getContext('2d');
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);
videoTexture = new THREE.Texture(videoImage);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
var movieMaterial = new THREE.MeshBasicMaterial({ map: videoTexture, overdraw: true, side:THREE.DoubleSide });
// the geometry on which the movie will be displayed;
// movie image will be scaled to fit these dimensions.
var movieGeometry = new THREE.PlaneGeometry(240, 100, 4, 4);
var movieScreen = new THREE.Mesh(movieGeometry, movieMaterial);
movieScreen.position.set(0,50,00);
scene.add(movieScreen);
camera.position.set(0,150,300);
camera.lookAt(movieScreen.position);
window.addEventListener('resize', resize, false);
setTimeout(resize, 1);
}
function update() {
resize();
camera.updateProjectionMatrix();
controls.update();
}
function animate()
{
requestAnimationFrame(animate);
render();
//update();
}
function fullscreen() {
video.play();
console.log(video);
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
}
function resize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
//console.log(container, width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
//effect.setSize(width, height);
}
function render()
{
if (video.readyState === video.HAVE_ENOUGH_DATA)
{
videoImageContext.drawImage(video, 0, 0);
if (videoTexture)
videoTexture.needsUpdate = true;
}
renderer.render(scene, camera);
}
</script>
</body>
</html>
그래서 비디오를 재생할 수있었습니다 (일종의). 오디오는 들리지만 비디오는 보지 못합니다. 이 블로그 게시물에 제안 된대로 유형 특성을 제거하여 수행되었습니다. http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/ 그러나 비디오의 오디오 부분이 재생되면 dev 콘솔에 이러한 오류가 표시됩니다. ** 잡히지 않은 SecurityError : 'WebGLRenderingContext'에서 'texImage2D'를 실행하지 못했습니다. 오염 된 캔버스가로드되지 않을 수 있습니다. three.min.js : 507 ** – sandav