Three.js 视频 envmap答案

【问题标题】：Three.js video envmapThree.js 视频 envmap
【发布时间】：2015-08-07 08:07:21
【问题描述】：

我正在努力创建一个反映视频 envmap 的立方体，但我无法找到任何解决方案或示例来说明如何做到这一点，只是谷歌搜索。

我有一个立方体的工作示例，其 envmap 包含 jpg here

我尝试用 webm 和 mov 视频文件简单地替换 jpg，但它无法正常工作。

这还能做到吗？

这是我的代码的相关sn-p：

var env_url = [
  'textures/dawnmountain-xneg.png',
  'textures/dawnmountain-xneg.png',
  'textures/dawnmountain-xneg.png',
  'textures/dawnmountain-xneg.png',
  'textures/dawnmountain-xneg.png',
  'textures/dawnmountain-xneg.png'
];

var enviro = new THREE.ImageUtils.loadTextureCube(env_url);    

var cubeMaterial = new THREE.MeshPhongMaterial({
  envMap: enviro,
  shading: THREE.SmoothShading,
  metal: true,
  combine: THREE.MixOperation, 
  reflectivity: 0.70,
  specular: 0x7a7a7a,
  bumpMap: mapHeight,
  bumpScale: 0.03,
});

【问题讨论】：

标签： three.js

【解决方案1】：

是的，它可以完成，但不是那么自动，而且我认为不需要修改 three.js 渲染代码。

您需要更新视频中的 three.js 纹理。视频文件不能直接用作 3D 对象的纹理，您只能像这样直接使用图像。

对于普通纹理来说，它非常简单，jetienne 在https://github.com/jeromeetienne/threex.videotexture 上为它提供了一个很好的简单实用程序——也有演示。

虽然 envMaps 不支持开箱即用。

【讨论】：

非常感谢Antont的回复！就像你说的那样，使用：map:texture 将它映射到矩形本身非常容易。几个小时以来，我一直在用 jetienne 的 lib 挠痒痒，试图找到一种方法将它放到 envMap 上，但无法让它工作......对我来说，它似乎 envMap 只允许 url 而不是 THREE.Textures？
我会检查 envMap 的来源，如果需要，相应地修改它以允许使用您提供的纹理（无论如何，最终在内部使用纹理）。您可以为此制作自己的 envmap 副本。