如何使用来自Github的THREE.JS源代码和图像文件制作JSF的精灵？ [英] How to make JSFiddle of sprites using THREE.JS source and image files from Github?

问题描述

您好我正在尝试基于官方THREE.js制作一个 JSFiddle HUD Sprite示例。

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

JSFiddle可以运行，但它似乎无法使用原始文件中的URL加载/应用精灵图像： -

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

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

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

我意识到尝试从不同来源访问图像文件时存在问题（跨源资源共享 - CORS-问题），但我希望能够在同一台服务器上找到THREE.js库和示例图像。我想Github并不是设计用作一个活动文件服务器，至少对于图像来说。我想我可以简单地将图书馆和图像复制到我自己的网站并链接到当我在StackOverflow中提出问题时 - 但肯定这是JSFiddle应该用于的事情？

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?

所以我的问题 - 在技术上有没有办法从THREE.js例子和来自相同（官方）起源的THREE.js库中访问图像？

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?

推荐答案

我不认为您可以通过加载图片来完成。

但是，您可以在变量中使用图像数据（dataUri）。

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/

我使用这个工具来获取图像dataUri。

http://dataurl.net/#dataurlmaker

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

这篇关于如何使用来自Github的THREE.JS源代码和图像文件制作JSF的精灵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！