Question

您好我正在尝试根据官方的THREE.js JSFiddle制作HUD Sprites example。

JSFiddle运行但似乎没有使用原始文件中的URL加载/应用精灵图像： -

//... URL's as in the Original file
var mapA = THREE.ImageUtils.loadTexture ("textures/sprite0.png", undefined, createHUDSprites );

var mapB = THREE.ImageUtils.loadTexture     ("textures/sprite1.jpg" );

mapC = THREE.ImageUtils.loadTexture         ( "sprite2.png" );

我尝试了各种替代网址但没有成功： -

//... my failed URL attempts
/*
var mapA =THREE.ImageUtils.loadTexture("https://github.com/mrdoob/three.js/blob/master/examples/textures/sprite0.png", undefined, createHUDSprites );

var mapB = THREE.ImageUtils.loadTexture     ("https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprite1.jpg" );

mapC = THREE.ImageUtils.loadTexture ("http://mrdoob.github.com/three.js/blob/master/examples/textures/sprite2.png" );

我意识到尝试从不同的源（Cross Origin Resource Sharing - CORS-问题）访问图像文件时出现问题，但我希望能够找到THREE.js库和示例图像。同一台服务器我猜Github并不是设计用作实时文件服务器，至少对于图像而言。我想我可以简单地将库和图像复制到我自己的网站，并在我在StackOverflow中提出问题时链接到那个 - 但肯定这是JSFiddle应该用的那种东西？

所以我的问题 - 技术上是否有任何方法可以访问THREE.js示例中使用的图像以及来自相同（官方）原点的THREE.js库？

Answer 1

我认为你不能通过加载图像来实现但是，您可以在变量中使用图像数据（dataUri）。

var imageData = "data:image/png;base64,...."
var mapA = THREE.ImageUtils.loadTexture(imageData)

https://jsfiddle.net/y5fmvge5/13/

我用这个工具来获取图像dataUri http://dataurl.net/#dataurlmaker

如何使用来自Github的THREE.JS源文件和图像文件制作精灵的JSFiddle？

1 个答案: