- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用实时相机将 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 看到结果
现在我想使用这个视频流来制作拉丝金属质感,所以我尝试创建另一种 Material :
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。
我从三个开始,想知道是否有办法做到这一点?
谢谢,跳转
最佳答案
我可以看到两种方式。首先,如果您只想要相同的图像但具有一些镜面高光/反光度,则只需更改
var material = new THREE.MeshLambertMaterial({ map:texture});
到
var material = new THREE.MeshPhongMaterial({
map: texture ,
ambient: 0x030303,
specular: 0xffffff,
shininess: 90
});
并尝试使用环境光、镜面反射和反光度设置来找到您喜欢的设置。
其次,如果您真的想为视频图像本身添加效果,您可以将图像绘制到 Canvas 上,操纵像素,然后将纹理图像设置为该新图像。这也可以通过自定义着色器来完成,避免 Canvas 步骤,但是已经有用于将图像过滤器应用于元素的库,所以我会坚持使用它。那会像这样工作:你需要一个 Canvas 来绘制 <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,因此您仍然需要绘制 Canvas ,但只需裁剪/调整图像。所以我让这个工作:
// 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 - WebRTC 和 ThreeJS 创建拉丝金属纹理立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13675421/
我是一名优秀的程序员,十分优秀!