Three.js 中的 DataURI 图像纹理在 Firefox 中不起作用答案

【问题标题】：DataURI image texture in three.js doesn't work in FirefoxThree.js 中的 DataURI 图像纹理在 Firefox 中不起作用
【发布时间】：2012-01-21 13:09:18
【问题描述】：

我正在使用three.js 做一些地质学的在线交互建模，并且一直在使用Canvas 元素创建图像URI（输出为：data:image/png;base64,）。

图像创建在 Chrome、Firefox 和 Safari 中运行良好，但 使用 three.js 中的图像作为纹理不会在 Firefox 中显示。

我可以展示的最简单的演示是通过更改 three.js 示例的一行，用图像 URL 替换 dataURI，并将其用作纹理。

http://visiblegeology.com/renderingProblem/

这在 Chrome 和 Safari 中对我来说很好，但在 Firefox 中却不显示。

我想知道是否有人有任何建议、解决方法或想法。

感谢您的帮助，

罗文

【问题讨论】：

标签： firefox three.js data-uri

【解决方案1】：

我已经使用常规的 img 标签进行了检查。它在 Firefox 中以这种方式工作。所以问题似乎是three.js和数据uri的组合。

mrdoob 的这个例子在 Firefox 中也不起作用：http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html

一些建议：

检查你是否使用的是最新的三码。
尝试删除数据 uri 的最终等号。它用于填充，可能不是必需的。
尝试一一禁用您的插件，因为它们也可能会干扰

【讨论】：

我得出了同样的结论。我只是用新图像替换了材质贴图中的图像标签：'var imag = new Image(); imag.src = base64_URI; scene.objects[index].material.map.image = imag;场景.对象[索引].material.map.needsUpdate = true;'现在可以在Firefox中使用，但有时会出错..