Three.jsテクスチャ

Question

などの映像の一部私はThree.jsメッシュ内のテクスチャとしてビデオの一部を使用しようとしています。

ビデオは、魚眼レンズだと私は唯一の実際のコンテンツ、中央にすなわち円で一部を使いたいhttp://video-processing.s3.amazonaws.com/example.MP4、ここにあります。

私は何とか、作物や位置をマスクし、この部分のみのショーや黒い部分が無視されるように、メッシュ上のビデオを伸ばしたいです。

ビデオコード

var video = document.createElement('video'); 
    video.loop = true; 
    video.crossOrigin = 'anonymous'; 
    video.preload = 'auto'; 
    video.src = "http://video-processing.s3.amazonaws.com/example.MP4"; 
    video.play(); 

var texture = new THREE.VideoTexture(video); 
    texture.minFilter = THREE.NearestFilter; 
    texture.magFilter = THREE.LinearFilter; 
    texture.format = THREE.RGBFormat; 

var material = new THREE.MeshBasicMaterial({ map : texture }); 

ビデオ次いでVRの印象を与えるために、220度の球体上に投影されます。ここで

var geometry = new THREE.SphereGeometry(200,100,100, 0, 220 * Math.PI/180, 0, Math.PI); 

は、コードペンです http://codepen.io/bknill/pen/vXBWGv

は誰もが私はこれを行うのがベストだか知っていることはできますか？

Answer 1

要するに、テクスチャの関連領域が球の対応する頂点に割り当てられるように、球のUVマップを更新する必要があります。

各頂点のUV座標は、その頂点に割り当てられたテクスチャ内の座標（範囲[0..1]）を定義するので、座標（0,0）は左上隅、（1、 1）動画の右下に表示されます）。 This exampleはこれが何であるかあなたにアイデアを与えるべきです。

これらのUV座標は、すべての面のすべての頂点がUV座標の値がTHREE.Vector2になるように、geometry.faceVertexUvs[0]としてジオメトリに格納されます。これは二次元アレイである、最初のインデックスは、顔インデックス及び第一面のための頂点のインデックス（例を参照）です。 UVマップを生成するよう

これを行うには、少なくとも2つの方法があります。おそらく、もっと簡単な方法（YMMV、私はいつもこのルートを行くと思いますが）、ブレンダーのような3D編集ソフトウェアを使用してUVマップを作成し、three.js輸出・プラグインを使用して、その結果のオブジェクトをエクスポートすることです。

もう1つの方法は、値を手で計算することです。最初に、球の正投影を使用することをお勧めします。基本的に、原点に単位球がある場合、頂点のz座標を落として、u = x/2 + 0.5とv = y/2 + 0.5をUV座標として使用します。

このようなものになるだろうJSで

：

// create the geometry (note that for simplicity, we're 
// a) using a unit-sphere and 
// b) use an exact half-sphere) 
const geometry = new THREE.SphereGeometry(1, 18, 18, Math.PI, Math.PI) 
const uvs = geometry.faceVertexUvs[0]; 
const vertices = geometry.vertices; 

// compute the UV from the vertices of the sphere. You will probably need 
// something a bit more elaborate than this for the 220degree FOV, also maybe 
// some lens-distorion, but it will boild down to something like this: 
for(let i = 0; i<geometry.faces.length; i++) { 
    const face = geometry.faces[i]; 
    const faceVertices = [vertices[face.a], vertices[face.b], vertices[face.c]]; 

    for(let j = 0; j<3; j++) { 
    const vertex = faceVertices[j]; 
    uvs[i][j].set(vertex.x/2 + 0.5, vertex.y/2 + 0.5); 
    } 
} 
geometry.uvsNeedUpdate = true; 

（あなたはどちらの方向でより多くの情報が必要な場合は、コメントを削除し、私は詳しく説明します）

Answer 2

あなたが軸 texture.repeat.set（0.5、0.5）の両方に2倍のスケールに、例えばテクスチャ

http://threejs.org/docs/#Reference/Textures/Texture

をスケーリングするtexture.repeatを使用することができます。