3

THREE.ImageUtils.loadTextureCube()回転する立方体にリアルタイムカメラを使用して適用しようとしています。

今まで、私は自分のビデオを使用して単純なテクスチャを適用することができましたMeshLambertMaterial：

var geometry = new THREE.CubeGeometry(100, 100, 100, 10, 10, 10);
videoTexture = new THREE.Texture( Video ); // var "Video" is my <video> element
var material = new THREE.MeshLambertMaterial({ map: videoTexture });
Cube = new THREE.Mesh(geometry, material);
Scene.add( Cube );

それは大丈夫です、そしてあなたはhttp://jmpp.fr/three-cameraで結果を見ることができます

このビデオストリームを使用して、つや消しの金属テクスチャを作成したいので、別の種類のマテリアルを作成しようとしました。

var videoSource = decodeURIComponent(Video.src);
var environment = THREE.ImageUtils.loadTextureCube([videoSource, // left
                                                    videoSource, // right
                                                    videoSource, // top
                                                    videoSource, // bottom
                                                    videoSource, // front
                                                    videoSource]); // back
var material = new THREE.MeshPhongMaterial({ envMap: environment });

...しかし、次のエラーがスローされます：

blob:http://localhost/dad58cd1-1557-41dd-beed-dbfea4c340db 404 (Not Found)

loadTextureCube（）は6つの配列パラメーターを画像として取得しようとしていると思いますが、代わりにvideoSourceを評価していないようです。

私は3つから始めて、それを行う方法があるかどうか疑問に思いましたか？

Thx、jmpp

4

3 に答える 3

4

私が見ることができる2つの方法があります。まず、同じ画像が必要であるが、いくつかの鏡面ハイライト/光沢がある場合は、変更するだけです

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

に

var material = new THREE.MeshPhongMaterial({ 
         map: texture , 
         ambient: 0x030303, 
         specular: 0xffffff, 
         shininess: 90
});

周囲の鏡面反射光の設定で遊んで、好きなものを見つけてください。

次に、ビデオ画像自体に効果を追加したい場合は、画像をキャンバスに描画し、ピクセルを操作してから、テクスチャ画像をその新しい画像に設定します。これは、キャンバスの手順を避けてカスタムシェーダーを使用して行うこともできますが、要素に画像フィルターを適用するためのライブラリが既に存在するため、これに固執します。これは次のように機能します。JavaScriptを使用して<canvas id='testCanvas' width=256 height=256></canvas>Thenに描画するにはキャンバスが必要です。

var ctx = document.getElementById('testCanvas').getContext('2d');
texture = new THREE.Texture();

// in the render loop
ctx.drawImage(Video,0,0);
var img = ctx.getImageData(0,0,c.width,c.height);
// do something with the img.data pixels, see 
// this article http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
// then write it back to the texture
texture.image = img;

texture.needsUpdate = true

更新しました！

実際には、envMapとして実行できます。必要なのは、ビデオを同じ幅/高さの2の累乗にすることだけです。ビデオは640x480としてChromeにストリーミングされるため、キャンバスを描画する必要がありますが、画像を切り抜く/正方形にするだけです。だから私はこれを機能させました：

 // In the access camera part
 var canvas = document.createElement('canvas')
     canvas.width = 512;
     canvas.height = 512;
 ctx = canvas.getContext('2d');   

 // In render loop 
 ctx.drawImage(Video,0,0, 512, 512);
 img = ctx.getImageData(0,0,512,512);
 // This part is a little different, but env maps have an array 
 // of images instead of just one
 cubeVideo.image = [img,img,img,img,img,img];
 if (Video.readyState === Video.HAVE_ENOUGH_DATA)
     cubeVideo.needsUpdate = true;
于 2012-12-03T02:45:03.887 に答える
1

これを試して：

var environment = new THREE.Texture( [ Video, Video, Video, Video, Video, Video ] );
var material = new THREE.MeshPhongMaterial({ envMap: environment });

// in animate()
environment.needsUpdate = true;
于 2012-12-03T01:52:00.717 に答える
0

さて、Phong マテリアルを使用して立方体に光沢のある効果を得ることができました。

videoTexture = new THREE.Texture( Video );
var material = new THREE.MeshPhongMaterial({
    map: videoTexture,
    ambient: 0x030303,
    specular: 0xc0c0c0,
    shininess: 25
});

これはそれほど悪くないように見えます。

しかし、aTHREE.Texture([Video,Video,Video,Video,Video,Video]);は envMap として機能していないようです。私はまだ黒い立方体を取得します。

于 2012-12-03T11:05:10.207 に答える