我已经使用three.js创建了一个360度视频播放器。当视频比例为1:2时,它可以正常工作。然而,在比例为9:16的视频上,我会在球体的顶部和底部看到两个黑色圆圈。
以下是代码的基本原理:
以下是代码的基本原理:
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, 0.5, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var video = document.createElement( 'video' );
video.width = 1280;
video.height = 720;
video.autoplay = true;
video.loop = true;
video.src = "56a8fd62e4b0834c57810c6f_1280x720_v2.mp4";
var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
var material = new THREE.MeshBasicMaterial( { map : texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 1280, 720 );
container.appendChild( renderer.domElement );
请问有人可以帮忙吗?我找不到任何解决方案,而不涉及修改 three.js 映射函数,这是我想要避免的。
谢谢!
THREE.MeshBasicMaterial
之外的其他材质吗? - prieston