Question

我使用three.js创建了一个360视频播放器。每当我点击鼠标并且我成功获得这些坐标时，我正在使用光线投射来查找3D世界坐标。

有没有办法将这些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>

Answer 1

如果我正确理解你的问题，你甚至不需要3d坐标来获得平面视频中的坐标：你可以使用raycaster报告的球形交叉点的UV坐标。

坐标（0,0）是视频的左上角，（1,1）是右下角。

360视频播放器世界协调

1 个答案: