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

问题

Hi I am trying to make a JSFiddle based on the official THREE.js HUD Sprites example.

The JSFiddle runs but it doesn't seem to load/apply the sprite images using the URL's in the original file:-

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

I have tried various alternative URL's without success:-

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

I realize there is a problem trying to access image files from a different origin (the Cross Origin Resource Sharing - CORS- issue) but I had hoped to be able to find both the THREE.js library and the example images on the same server. I guess that Github is not designed to act as a live file server, at least for images. I suppose I could simply copy the library and images to my own web site and link to that when I raise questions in StackOverflow - but surely that is the sort of thing that JSFiddle is supposed to be for?

So my question - is there any way technically of accessing the images used in the THREE.js examples and the THREE.js library from the same (official) origin?

回答1:

I don't think you can do it by loading the images.
But, you can use the image data (dataUri) in a variable.

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

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

I used this tool to get the image dataUri.
http://dataurl.net/#dataurlmaker

来源：https://stackoverflow.com/questions/28575290/how-to-make-jsfiddle-of-sprites-using-three-js-source-and-image-files-from-githu

标签

javascript

html

image

three.js