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。

我从三个开始，想知道是否有办法做到这一点？

谢谢，jmpp

4

3 回答 3

4

我可以看到两种方式。首先，如果您只想要相同的图像但具有一些镜面高光/光泽，那么只需更改

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

到

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

并使用环境光、镜面反射、光泽度设置来找到你喜欢的。

其次，如果您真的想为视频图像本身添加效果，您可以将图像绘制到画布上，操作像素，然后将纹理图像设置为新图像。这也可以通过自定义着色器来完成，避免画布步骤，但是已经有用于将图像过滤器应用于元素的库，所以我会坚持下去。这会像这样工作：你需要一个画布来绘制<canvas id='testCanvas' width=256 height=256></canvas>然后用javascript

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 回答