0

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>
4

1 に答える 1

0

私があなたの質問を正しく理解していれば、フラット ビデオの座標を取得するために 3D 座標さえ必要ありません。レイキャスターが球の交差について報告する UV 座標を使用するだけです。

座標 (0, 0) はビデオの左上隅、(1, 1) は右下隅です。

于 2016-08-21T18:54:54.783 に答える