javascript – WebRTC和ThreeJS创建拉丝金属textureCube

2019-09-01 13:36:52 阅读：370 来源： 互联网

标签：javascript webgl webrtc three-js textures

我正在尝试使用实时相机将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个数组参数作为图像,但似乎并不欣赏视频源.

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

谢谢,
JMPP

解决方法:

我可以通过两种方式看到.首先,如果你只想要相同的图像,但有一些镜面高光/光泽,那么只需改变

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的相同宽度/高度的幂.视频以160×480的形式传输到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;

标签：javascript,webgl,webrtc,three-js,textures
来源： https://codeday.me/bug/20190901/1783720.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – WebRTC和ThreeJS创建拉丝金属textureCube