javascript - 无法让 Sprite 贴图在三个 js 中正常工作

Question

我只是想正常地向我的场景添加一个 Sprite 。我正在使用此图片: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);

但是，当我向 Sprite 添加颜色时，整个图像都会变成颜色，而不仅仅是空白区域。

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

我不完全确定我做错了什么，任何帮助将不胜感激。

Answer 1

图像未加载，因为图像的 URL 为 i.imgur.com/kMT4mOH.png。所以页面正在本地搜索该文件。 IE。 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?