0
我创建了一个360视频播放器,使用three.js。我使用光线投射来查找3D世界坐标,无论何时我点击鼠标并成功获取这些坐标。360视频播放器世界坐标系
有没有办法将这些3D世界坐标映射到展开的(全景,等长方形)视频坐标。我想到了将3D世界坐标转换为屏幕坐标,但这些坐标映射并不对应于实际的3D点。任何帮助将不胜感激。
这里是我使用的代码:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/211120/orbitControls.js"></script>
<a href="#" id="testButton">TEST</a>
<!-- <a href="#" id="testButton2">TEST2</a> -->
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true });
var projector = new THREE.Projector();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var video = document.createElement('video');
video.autoplay = true;
video.src = 'https://streams.kolor.com/streams/833ec36d-b115-43a2-bbf1-aaca49046bab/source.02-720p_HD.mp4';
video.crossOrigin = '';
videoTexture = new THREE.Texture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
var scene = new THREE.Scene();
var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
var sphereMat = new THREE.MeshBasicMaterial({map: videoTexture});
sphereMat.side = THREE.BackSide;
var cube = new THREE.Mesh(cubeGeometry, sphereMat);
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 10000);
camera.position.set(0,0,50);
scene.add(camera);
var controls = new THREE.OrbitControls(camera);
controls.rotateUp(Math.PI/4);
controls.target.set(
camera.position.x + 0.1,
camera.position.y,
camera.position.z
);
//console.log('controls', controls);
//create controls
function onMouseMove(event) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children, true);
console.log(intersects[0].point);
var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width/2, heightHalf = height/2;
/*camera.updateMatrixWorld(true);
scene.updateMatrixWorld();
var vector1 = new THREE.Vector3();
vector.setFromMatrixPosition(intersects[0].object.matrixWorld);
vector.project(camera);*/
var p = new THREE.Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);
var vector1 = p.project(camera);
vector1.x = (vector1.x * widthHalf) + widthHalf;
vector1.y = - (vector1.y * heightHalf) + heightHalf;
console.log(vector1);
}
function render() {
if(video.readyState === video.HAVE_ENOUGH_DATA){
videoTexture.needsUpdate = true;
}
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
window.addEventListener('mousedown', onMouseMove, false);
</script>
</body>
</html>
是的,我想将坐标从球面转换为平面。raycaster报告的坐标也是负值。我不认为我可以使用负坐标。顺便说一句,我从来没有听说过紫外线坐标。我会仔细看看它,如果你有任何参考,可以请你分享一下。 –
谢谢......这就是我一直在寻找的 –