360 video player world coordinte

私はthree.jsを使用して360ビデオプレーヤーを作成しました。マウスをクリックするたびにレイキャスティングを使用して3Dワールド座標を検索しています。これらの座標を正常に取得しています。360 video player world coordinte

これらの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>

出典

2016-08-21 tariq anwar