您好我是三个j的初学者，我需要制作一个应用程序，允许使用drag＆amp; amp;更改球体的纹理（360视频）。下降。
我目前有以下
var camera, scene, renderer;
var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
distance = 50,
onPointerDownPointerX = 0,
onPointerDownPointerY = 0,
onPointerDownLon = 0,
onPointerDownLat = 0;
init();
animate();
function init() {
var container, mesh;
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale(-1, 1, 1);
var video = document.createElement('video');
video.crossOrigin = 'anonymous';
video.width = 640;
video.height = 360;
video.loop = true;
video.muted = true;
video.src = 'MaryOculus.webm';
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.play();
// var texture = new THREE.VideoTexture(video);
// texture.minFilter = THREE.LinearFilter;
// texture.format = THREE.RGBFormat;
var material = new THREE.MeshBasicMaterial({
map: new THREE.VideoTexture(video)
});
console.log(material);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('wheel', onDocumentMouseWheel, false);
//
document.addEventListener('dragover', function (event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false);
document.addEventListener('dragenter', function (event) {
document.body.style.opacity = 0.5;
}, false);
document.addEventListener('dragleave', function (event) {
document.body.style.opacity = 1;
}, false);
document.addEventListener('drop', function (event) {
event.preventDefault();
var reader = new FileReader();
reader.addEventListener('load', function (event) {
material.map.image.src = event.target.result;
material.map.needsUpdate = true;
}, false);
reader.readAsDataURL(event.dataTransfer.files[ 0 ]);
document.body.style.opacity = 1;
}, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove(event) {
if (isUserInteracting === true) {
lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
}
function onDocumentMouseWheel(event) {
distance += event.deltaY * 0.05;
distance = THREE.Math.clamp(distance, 1, 50);
}
function animate() {
requestAnimationFrame(animate);
update();
}
function update() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = distance * Math.sin(phi) * Math.cos(theta);
camera.position.y = distance * Math.cos(phi);
camera.position.z = distance * Math.sin(phi) * Math.sin(theta);
camera.lookAt(camera.target);
renderer.render(scene, camera);
}
当我将视频添加为新纹理时，它无法播放，或者发出错误（image2D），如何解决？
提前致谢