three.js

Question

IはThree.jsのこの例に取り組んでいテクスチャとして動画を追加しますビデオ形式は.ogvです）。私は上記の例を次のように編集して、私が望むことを達成しました。

video = document.createElement('video'); 
video.autoplay = true; 
video.src = "textures/videos/Row1Col1.ogv"; 
var videoTexture = new THREE.Texture(video); 
    videoTexture.needsUpdate = true; 

var materials = [ 
    videoTexture, // right 
    loadTexture('textures/cube/Park2/negx.jpg'), // left 
    loadTexture('textures/cube/Park2/posy.jpg'), // top 
    loadTexture('textures/cube/Park2/negy.jpg'), // bottom 
    loadTexture('textures/cube/Park2/posz.jpg'), // back 
    loadTexture('textures/cube/Park2/negz.jpg') // front 
]; 

mesh = new THREE.Mesh( 
    new THREE.BoxGeometry(300, 300, 300, 32, 32, 32), 
    new THREE.MultiMaterial(materials) 
); 

残りのコードは前述の例とまったく同じです。代わりに（球と「」側の1で遊んつのビデオにレンダリングされた5枚の画像を持っている）は、所望の結果を得るための

、私はこれを取得しています：イメージがされている

私はビデオが再生されて表示されません。そこに白いテキストがあります。他に何もない。

私はThree.jsが初めてで、初めてビデオをテクスチャとして使用しようとしています。指定された地域でビデオを再生する方法を教えてください。

Answer 1

THISのソースを確認してください。
彼はビデオを稼働させるためにもう少しやっているのを見ることができます。
具体的には、ビデオをキャンバスに描画し、そのキャンバスを素材のテクスチャとして使用します。

// create the video element 
video = document.createElement('video'); 
video.src = "textures/videos/Row1Col1.ogv"; 
video.load(); // must call after setting/changing source 
video.play(); 
videoImage = document.createElement('canvas'); 
videoImage.width = 480; 
videoImage.height = 204; 

videoImageContext = videoImage.getContext('2d'); 
// background color if no video present 
videoImageContext.fillStyle = '#000000'; 
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height); 

videoTexture = new THREE.Texture(videoImage); 
videoTexture.minFilter = THREE.LinearFilter; 
videoTexture.magFilter = THREE.LinearFilter;