Struggling with getting Sprite maps to function properly within THREE.js

I'm having some trouble adding a sprite to my scene in the usual way. The image I'm using can be found here: 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);

However, when I apply color to the sprite, the entire image changes color instead of just modifying the white space.

For more details, you can check out this jsfiddle: http://jsfiddle.net/VsWb9/2331/

I'm a bit puzzled as to what I might be doing incorrectly, so any assistance would be greatly appreciated.

Answer №1

The image is not loading because the URL to the image is i.imgur.com/kMT4mOH.png. Therefore, the page is searching for the file locally. For example,

http://fiddle.jshell.net/VsWb9/2331/show/i.imgur.com/kMT4mOH.png
.

To access the file from its external location, you could use http://i.imgur.com/kMT4mOH.png. However, cross-domain restrictions on WebGL textures could prevent this from working as well.

If you run the code from a server where both the texture image and the image file are on the same server, it should work without any issues.

For more information on cross-domain WebGL images, you can visit: http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

If you really need it to work in a JSFiddle, there may be a workaround outlined in another Stack Overflow question here: cross-domain image for three.js (canvas/webGL), proxy?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

app.js import test from "./asyncTest"; test().then((result)=>{ //handle my result }); asyncTest.js const test = async cb => { let data = await otherPromise(); let debounce = _.debounce(() => { fetch("https://jsonplaceholde ...

retrieving the webpage's HTML content from the specified URL using AngularJS

Utilizing the $http.get('url') method to fetch the content located at the specified 'url'. Below is the HTML code present in the 'url': <html> <head></head> <body> <pre style = "word-wrap: break ...

Cannot chain promises using 'then'

Having trouble understanding why the 'describeDir' promise chain is not working properly. Can anyone help me figure out what I did wrong here? Everything in the code seems to run, but functions like then or finally from the promise API never get ...

Month and year selection feature in ExtJS 4 catalog

I recently came across an interesting Fiddle that featured a Month and Year picker for apps. After finding this Fiddle here, I noticed that it was built using Extjs 5.0, and it worked perfectly. However, when attempting to switch it to version 4.2.1, the l ...

How can I create an Onclick function that works for multiple buttons sharing the same ID?

Having an issue with a component that loads data using buttons. I have a function that updates the state/variable based on the button ID, but since all button IDs are the same, it only works for the first button... I'm struggling to assign unique IDs ...

Inject a jQuery form submission using .html() into a div element

I am currently working on developing a basic forum where users can view listed topics and have the option to add new ones on-the-fly by clicking a link or image. How can I detect and handle the form submission event for the dynamically added form within an ...

Sending data as a string in an AJAX request

I have been struggling with this coffeescript function that controls dynamic select boxes. I am trying to pass the content of "modelsSelect" to another script, but for some reason, it's not working as intended. customScript.coffee dynamicSelection = ...

What is the best way to ensure a function returning a promise works effectively within a forEach loop?

Are you facing challenges using a function that returns a promise inside a forEach loop due to the asynchronous nature of the function? It seems like the forEach loop completes before the promise can finish fetching or manipulating the data. Below is a co ...

JavaScript featuring Ajax functionality

Although I have limited experience in web programming, I am currently testing a simple add-on to integrate with my app. The webpage I have created displays multiple rows, each containing an editable field for user input. After the user inputs data into th ...

Select Menu (Code Languages:CSS, JS, HTML, BBCode)

I'm currently in the process of setting up a BB code for a forum I moderate. Here's the code snippet I'm using to generate a dropdown box that users can add to the signature field of their profiles: <!DOCTYPE html> <html> <d ...

Is there a way to access the route name (path) in Express Node.js while making a request using the req object?

Within my Node.js Express server, I have implemented a generic middleware where I am trying to retrieve the route name. Here is an example: app.use(function (req, res, next) { //using a specific npm package that allows me to execute functions after send ...

What is the best way to showcase all menu and submenu items in separate dropdown lists?

Having trouble with my code, it's not functioning properly. I can't pinpoint the error. The menu displays correctly but the submenu isn't showing up under specific menus. Here is the code snippet: ##Table: menus## id name ...

achieving initial value to show upon page load

I'm trying to set a default value that is visible when the page loads. My goal is to have the first button always displayed by default in the "display-donation" div whenever someone visits the form. Currently, when the page loads, 10 is highlighted ...

Refresh text displayed on a button with the help of setInterval

I need help updating the text on a button with the id fixed-button at regular intervals. Here is the code I am currently using: <script type="text/javascript"> $(function() { $('#fixed-button').setInterval(function() { ...

Ways to eliminate brackets from a string

Currently, I am working on a challenge involving replacing strings using a function that accepts a string and an object of values. This task involves a two-part algorithm: Replacing values within the string that are enclosed in braces. If the value is wi ...

Remove a particular row from a database table

I'm facing an issue with my code. I want to be able to remove a row by clicking on a remove button within that row, but I'm unsure of how to accomplish this. <tbody id="myTable"> <?php if (!isset($_SESSION)){ ...

Is there a way to choose the final JSON element using Javascript or Google Apps Script?

Imagine if I extracted this data from a constantly updating JSON file. [{ "data": { "member": "Feufoe, Robert", "project": "Random Event", }, "folder": null, "id": 1062110, "spam": null }, { "data": { "membe ...

Unlock the power of AJAX in your WordPress site

I've been exploring the realm of Javascript and AJAX lately. I feel like I'm so close to getting it right, but there's something off with how I'm integrating WordPress ajax functions. I've spent a lot of time going through the docu ...

"Exploring the use of conditional rendering in React to dynamically hide and show components based

I am currently immersed in the world of React/Redux, focusing on an e-commerce project. This particular application offers two payment methods: cash and card payments. On the product display page, both payment icons are visible. However, I am seeking a sol ...

Generate an HTML document from a website page

Having difficulty grasping this concept. I am completely lost on where to begin. It is imperative that I determine how my website can generate a file (whether it be HTML or Text format) and enable users to download it, similar to the functionality in Goo ...