Creating a 3D cube with visual graphics as its faces using Three.js

I've been experimenting with different solutions but haven't had any luck finding a solution online. The error I'm encountering when running my program is: XMLHttpRequest cannot load file:///C:/Users/winst/Documents/Programming%20Projects/Miner/textures/Dirt.jpg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The file in question is a simple picture that resembles dirt.

Below is the portion of my code causing the issue:

// Loading textures
var textureLoader = new THREE.TextureLoader();

var texture0 = textureLoader.load('textures/Dirt.jpg');
var texture1 = textureLoader.load('textures/Dirt.jpg');
var texture2 = textureLoader.load('textures/Dirt.jpg');
var texture3 = textureLoader.load('textures/Dirt.jpg');
var texture4 = textureLoader.load('textures/Dirt.jpg');
var texture5 = textureLoader.load('textures/Dirt.jpg');

var materials = [
    new THREE.MeshBasicMaterial({ map: texture0 }),
    new THREE.MeshBasicMaterial({ map: texture1 }),
    new THREE.MeshBasicMaterial({ map: texture2 }),
    new THREE.MeshBasicMaterial({ map: texture3 }),
    new THREE.MeshBasicMaterial({ map: texture4 }),
    new THREE.MeshBasicMaterial({ map: texture5 })
];
var material = new THREE.MeshFaceMaterial(materials);

// Combining everything together
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ material }));

The rest of the code worked fine when using colored cubes instead of images on the sides. I came across similar code on Stack Overflow but mine still doesn't function properly.

I would appreciate any assistance. :)

Answer №1

If you're encountering CORS issues while trying to access local textures, it means that your code is attempting to retrieve files that are restricted due to security concerns.

As suggested by @prisoner849, I recommend starting off by reviewing this informative article. It provides a solid foundation on handling files within your local THREE.js script.

In response to your main query, below is an example demonstrating how you can assign different textures to each side of a cube:

var cubeMaterials = [
    new THREE.MeshBasicMaterial({map: image1}),
    new THREE.MeshBasicMaterial({map: image2}),
    new THREE.MeshBasicMaterial({map: image3}),
    new THREE.MeshBasicMaterial({map: image4}),
    new THREE.MeshBasicMaterial({map: image5}),
    new THREE.MeshBasicMaterial({map: image6}),
  ];
  cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterials );

  var cubeGeometry = new THREE.BoxGeometry(100,100,100);
  var cube = new THREE.Mesh(cubeGeometry,cubeMaterials);

Here's a functional demo for reference

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

Retrieve the element that triggered the event listener within Nuxt

I am currently developing a Nuxt project where I have set up my component using the code below. The select-parent-container has a click event attached to it. Whenever this event is triggered, I need to identify and return the specific parent container that ...

Can an onload function be triggered within the location.href command?

Can a function be called onload in the location.href using jQuery? location.href = getContextPath() + "/home/returnSeachResult?search=" + $('#id-search-text-box').val() + "&category=" + $('#search_concept').text() + "onload='j ...

When I make a post request, I receive a response in the form of an HTTPS link, but it is not redirected to

I'm making a post request and receiving the response as follows: " [Symbol(Response internals)]: {url: 'https://login.somenewloginpage'}" My intention is to open a new page using that URL, but unfortunately it does not redirect t ...

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

Having trouble deleting element despite having the correct ID?

Whenever I click on the map, it adds an element to the map div using this line of code: $('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng ...

Tests are not visible to jasmine-node

Currently, I am utilizing jasmine-node and running it with the following command: node.exe path/to/jasmine_node --verbose path/to/my_file.js Despite successfully invoking Jasmine-node and receiving an error for incorrect paths, it appears that no tests a ...

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

Importing JavaScript files to work with Vue-Router: A Step-by-Step Guide

Seeking guidance on importing JavaScript files correctly throughout my Vue project, including within the components used to implement changes with Vue-Router. Currently, encountering an issue where I must reload the component in order for the JavaScript to ...

Disabling eventListener upon the occurrence of another event is ineffective

I am having trouble with two functions in my app that create different HTML structures. I want to close the info button event when the menu_div button is clicked, and vice versa. Can anyone provide some help? const menu_div = document.createElement("butt ...

The arrival of chat featuring Ajax, long-polling, and support for multiple users has finally

Imagine a site with three modules: "links", "home", and "chat". The "links" and "home" modules are static pages that do not require long polling. However, in the "chat" module, new messages may arrive at any time from other users, requiring an immediate up ...

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

Property usedJSHeapSize in Chrome

After doing some research online, I found that the documentation on this topic is quite lacking. I am currently dealing with a significant memory leak in my code and have been using: window.performance.memory.usedJSHeapSize However, it seems like the val ...

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

"Utilize the power of the ajaxform jQuery plugin to automatically reset form fields

Initially, I'd like to emphasize that this is an original inquiry. My predicament is as follows: I have a chatroom php script where I utilize the ajaxForm jQuery plugin to seamlessly send new messages without having to reload the entire page. Howev ...

Having trouble with the installation of nodemon globally on macOS Mojave?

When using the Visual Studio Code terminal, I ran the following command: npm install -g nodemon The output in the terminal showed: npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! syscall access n ...

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

Is three.js able to detect vertices that are not referenced in the face list?

Imagine a scenario where a geometry contains superfluous vertices in the vertex list. However, these redundant vertices are not utilized in the face list of the geometry. I am curious to know if three.js will perform additional calculations during render ...

Customize form input using Javascript prior to inserting into database

On my Rails form, I have a basic setup like the following: <%= form_for @song do |f| %> <p> <%= f.label :url %><br> <%= f.text_field :url %> </p> <p> <%= f.submit %> </p> <% en ...

I am facing a challenge with AngularJS where I am unable to navigate between pages using the

I'm having issues with my route file app.js. Whenever I click on any link or button, it redirects me to books.html. What could be the mistake I'm making? var myApp = angular.module('myApp', ['ngRoute']); myApp.config([&apo ...

The Node.js application is unable to execute due to the error: "View "error" could not be found in the views directory."

Currently, I am following a tutorial that covers the integration of social login with Passport and Node. You can find the tutorial here: Tutorial Link In line with the tutorial, I have started working on a project while utilizing Windows 10 operating syst ...