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

Question

您好，我正在尝试制作 JSFiddle based on the official THREE.js HUD Sprites example。

JSFiddle 运行但它似乎没有 load/apply 使用原始文件中的 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" );

我已经尝试了各种替代方案 URL 但都没有成功：-

//... 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" );

我意识到尝试访问来自不同来源的图像文件时出现问题（跨源资源共享 - CORS- 问题）但我曾希望能够找到 THREE.js 库和同一服务器上的示例图像。我猜想 Github 并不是设计用来充当实时文件服务器的，至少对于图像而言是这样。我想当我在 Whosebug 中提出问题时，我可以简单地将库和图像复制到我自己的网站上，然后 link 复制到那个网站上——但是这肯定是 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？

How to make JSFiddle of sprites using THREE.JS source and image files from Github?

html

javascript

image

three.js