Using images from different domains in THREE.js

Currently, I have developed an application on app.domain.com and I am aiming to integrate images as textures from image1.domain.com, image2.domain.com, and so on.

Here is the code snippet I am currently using:

var texture = new THREE.Texture();
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
    texture.image = image;
    texture.needsUpdate = true;
    texture.minFilter = THREE.LinearFilter;
};
image.src = url;

Despite setting 

Access-Control-Allow-Origin:app.domain.com
in the image response header, I am encountering the following error message:

three.js?201606101337:30942 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at url may not be loaded.

javascriptcanvasthree.js

Answer №1

Have you considered utilizing the Texture Loader? It may be equipped to handle certain unique cases:

var loader=new THREE.TextureLoader();
loader.setCrossOrigin("anonymous");
loader.load(
  url,
  function manipulate_texture(tex) { }
);

If this approach doesn't yield results, you could experiment with adjusting the header to Access-Control-Allow-Origin: *.

Additionally, it's important to note that CORS functionality may be limited in Safari (OSX, iOS browser and webviews).

Answer №2

It's a success for me

const loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
const texture = loader.load("image.png");

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

Problem with sending data using $.ajax

I stumbled upon a strange issue. In one of my php pages, I have the following simple code snippet: echo $_POST["donaldduck"]; Additionally, there is a script included which makes a $.ajax call to this php page. $.ajax({ url: "http://provawhis ...

javascriptphpjqueryajax

How can we enhance the backbone sync feature by appending a query string to the URL?

I am facing an issue with adding a token to the backbone URL query string and I am seeking assistance from you all. Here are three important things to note: There is a REST API that requires a token for each request An NGINX backend handles authenticatio ...

javascriptjqueryajaxrestbackbone.js

Troubleshooting React on an Apache Server: A Comprehensive Guide

An interactive React application utilizing React Router has been successfully deployed on an Apache server. After making modifications to the .htaccess file, most of the routes function correctly as intended. Some specific routes within the app rely on us ...

javascriptreactjsapache

I could use some assistance with deciphering JSON data

After using console.log to display the data I received, I observed an object structured as follows (I trimmed some details for clarity and used ... to indicate repetitive information): [ Submission { title: 'Untitled', content: { ur ...

javascriptjsonnode.jsparsing

Validation using Joi allows for a field to be optional, but if it is included, it must be a positive integer

I am facing a challenge with a field in my JOI schema that I want to make optional, allowing for both undefined and null values. However, if a value is provided, it must be a positive integer. How can I accomplish this? So far, I have attempted the follow ...

javascriptnode.jsexpressvalidationjoi

The React lifecycle method componentDidMount is failing to execute

In my React application, I have the following route setup: <Route path={`${this.props.match.path}horoskop`} render={() => <HoroscopeController horoscopeService={this.horoscopeService} fortuneTellerService={this.fortuneTell ...

javascriptreactjsroutesreact-router

Saving changes made in HTML is not supported when a checkbox is selected and the page is navigated in a React application using Bootstrap

In my array, there are multiple "question" elements with a similar structure like this: <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 1</span></div ...

javascripthtmlreactjsreact-hooksbootstrap-5

Fetch data dynamically upon scrolling using an AJAX request

Instead of making an ajax call to load data, I want to do it on scroll. Here is the code I have: $.ajax({ type: 'GET', url: url, data: { get_param: 'value' }, dataType: ' ...

javascriptjqueryajax

"Creating varying lengths of time with useSpring: A Step-by-Step Guide

Is there a way for my component to have an animation that fully displays in 0.3s when my mouse enters, but disappears in 0.1s when my mouse leaves? Currently, with useSpring, I can only define one duration for both scenarios. How can I set different dura ...

javascriptreactjsreact-spring

Difficulty encountered in storing information in the database

I have been developing a survey generator but I am facing an issue where everything is empty. The client enters one or many questions, along with one or many answers for each question. These inputs are sent to my database. I have successfully coded the d ...

javascriptphpjquerydatabasesurvey

Discovering the right row to input the data and successfully integrating it: What is the best

Below is the code I am using to add a new task: <fieldset> <legend>Create New Task</legend> <input type="text" ng-model="subtaskname" placeholder="Subtask Name" ><br /> <select id="s1" ng-model="selectedItem" ng-options=" ...

javascriptangularjs

What is the best way to incorporate an environmental variable in my AngularJS controller?

My API Key is securely stored in my '.env' file to keep it hidden from Git. Here's a snippet of my .env file: API_TOKEN=secrettokengibberish When working on my Angular controller, I need to retrieve this variable for my AJAX call. This i ...

javascriptangularjsajaxapienvironment-variables

Even though setState is supposed to update the state and trigger a render, it's not showing up in the view for some

My React app consists of a simple word/definition feature. There is an edit box that appears for users to change the definition when they click on "edit". Even though I call getGlossary() to update the new definition in the state, I can see the changes in ...

javascriptreactjsstatesetstate

React: troubleshooting error of empty object displayed by console log

Just diving into the world of React and facing a challenge with importing a list of objects from a JS file to set them as the initial state of my app. Here's what I've tried: import allSamples from './reducers/reducerSamples'; var App ...

javascriptreactjs

Attempting to transmit a text message to a PHP script using Ajax

Hey there! I'm facing a challenge while trying to send a string to a PHP file using AJAX. It seems like the http.send function is not working as expected, and I suspect there might be an issue in my code. (I'm fairly new to programming) mainlin ...

javascriptajax

Implementing the 'not-allowed' cursor style on disabled rows in Material UI datagrid

I have a specific disabled row in a Material UI data grid where users are unable to select or perform any actions on it. I am looking to display the cursor as "not-allowed" on this particular row. How can we apply styling to only this row since there is no ...

javascriptreactjsmaterial-ui

The method for transforming all headers into permalinks with jquery/javascript

I am looking for a way to transform all headers on a page into clickable permalinks using jQuery or JavaScript. Here is the HTML code: $('h3').each(function() { var id = $(this).attr('id'); if (id) { //Check if the element has a ...

javascriptjqueryhtmlpermalinkshtml-heading

Struggling with extracting an array of objects from a JSON file and accessing individual attributes within each object?

As a newcomer to Typescript, I am eager to work with JSON and access its objects and attributes. However, I am encountering difficulties in achieving this. I have attempted using functions like 'for of' and 'for in', but unfortunately, ...

javascriptarraysjsontypescriptobject

Eclipse Content Assist feature appears to be malfunctioning as it fails to display

Having an issue with Eclipse on Win 10 (64bit) when working with JavaScript projects. I've tested this problem on both Eclipse Photon and version 2018-09 (64 bit versions) and encountered the same problem on both instances: After creating a new JavaS ...

javascriptcsshtmleclipsecontent-assist

JQuery Slideshow Automation

I have created a slideshow using Javascript and JQuery for my webpage. However, I am encountering an issue where only one of the slideshows cycles through all the pictures and then starts over, while the second one ends after cycling once. Can someone as ...

javascriptjquery