Question

我只是想通常在我的场景中添加一个精灵。我正在使用这张图片：i.imgur.com/kMT4mOH.png

var map = THREE.ImageUtils.loadTexture('i.imgur.com/kMT4mOH.png');
var mat = new THREE.SpriteMaterial({map:map, color: 0xff5200, fog: true, blending: THREE.AdditiveBlending});
var glow = new THREE.Sprite(mat);
scene.add(glow);

然而，当我为精灵添加颜色时，整个图像会变成颜色而不仅仅是白色空间。

这是一个jsfiddle：http://jsfiddle.net/VsWb9/2331/

我不完全确定我做错了什么，任何帮助都会受到赞赏。

Answer 1

图片未加载，因为图片的网址为i.imgur.com/kMT4mOH.png。因此页面在本地搜索文件。即。 http://fiddle.jshell.net/VsWb9/2331/show/i.imgur.com/kMT4mOH.png。

要从外部位置获取文件，您可以使用http://i.imgur.com/kMT4mOH.png，但是您会遇到webgl纹理上的跨域限制问题，因此这也不起作用。

我没有看到您的代码有任何问题，所以如果您从纹理图像和图像文件都位于同一服务器上的服务器上运行它，它应该可以工作。

详细了解跨域webgl图片：http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

如果您真的需要它在jsfiddle中工作，似乎可能有一个解决方法，它在其他stackoverflow问题上概述：cross-domain image for three.js (canvas/webGL), proxy?

无法让Sprite地图在三个js中正常工作

1 个答案: