Place an image on a single face of the cube

I'm trying to customize a cube by attaching different images to each side, but I'm encountering issues in the process. When I attempt to assign individual images to specific sides, they don't render correctly. It only works when I set all sides to display the same image.

var textureLoader = new THREE.TextureLoader();                             
var textures = [];
for (let i = 0; i < 6; i++) {
  textures.push(textureLoader.load(`images/${i}.png`));
}

var cubeMaterials = [];
textures.forEach(texture => {
  cubeMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
});

var cubeGeometry = new THREE.BoxGeometry(3, 2, 3);                          
let cube = new THREE.Mesh(cubeGeometry, cubeMaterials);                   
group.add(cube);

Answer №1

THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('image-link');
texture.anisotropy = renderer.getMaxAnisotropy();

var cubeMaterial = [
    new THREE.MeshBasicMaterial({
        map: texture //left
    }),
    new THREE.MeshBasicMaterial({
        color: 'purple' //right
    }),
    new THREE.MeshBasicMaterial({
        color: 'red' // top
    }),
    new THREE.MeshBasicMaterial({
        color: 'teal' // bottom
    }),
    new THREE.MeshBasicMaterial({
        color: 'brown' // front
    }),
    new THREE.MeshBasicMaterial({
        color: 'gray' //back
    })
];

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

Unit test failing due to Vue v-model binding not functioning as expected

I am attempting to monitor the value of the #username element when I change the data in form.username // Regitser.vue ... <div class="form-group"> <label for="username">Username</label> <input type="text ...

The corresponding Javascript method for jquery's ajaxStop

Currently, I have numerous ajax requests running concurrently and I would like to trigger a function once they all have completed. I came across the jQuery function: ajaxStop(), however, I am unable to utilize jQuery in this particular project. Is there ...

Displaying JavaScript - Nothing to Echo in PHP

Using PHP to echo a JavaScript block, I have encountered an error message. echo "<script language='javascript' type='text/javascript'> jQuery(document).ready(function($){ var $lg = $('#mydiv'); ...

Interact with elements on a dynamically loaded webpage using Selenium WebDriver in Java

I am faced with a challenge of clicking on a specific element on a dynamically loaded page, where the web element is generated as we scroll down the page, similar to the setup on a Jabong webpage. Here is the code I tried on the Jabong webpage: WebDrive ...

Importing models in SceneJS does not function properly with Internet Explorer

I've been exploring different webGL frameworks lately. While I like SceneJS, I've noticed some compatibility issues with Internet Explorer. For instance, in IE 11, importing OBJ files seems to cause the online examples to freeze up: Check out th ...

React Native's fetch function appears to be non-responsive

I am experiencing an issue where the fetch function does not seem to fire in my React Native component: import { Button } from 'react-native'; export function Test() { function submit() { console.log('submit'); fetch('h ...

Move the camera left and right, up and down using the arrow keys in WebGL

I am currently working on implementing a basic camera movement system in WebGL using JavaScript and the keyboard to control the camera's movement along the X and Y axes. However, I am facing an issue where the camera moves in world coordinates rather ...

Exploring ways to incorporate various classes into my validate() elements using jQuery

I'm currently using the jQuery method validate to verify this particular form: <form id="emailRecover"> <div class="row light-field-container error-container"> <input type="text" id="dniPassword" name="dniPassword" requ ...

Toggle button visibility on ng-repeat item click

Hello everyone, I'm encountering an issue with displaying and hiding buttons in ng-repeat. <div class="row" ng-repeat="item in items"> <button type="button" ng-click="add()">+</button> <button type="button" ng-click="remo ...

Using Node.js with Express to seamlessly pass objects to EJS templates

I have a scenario where I am passing an object to my template and I want to display the details of that object in HTML. app.get('/', function (req, res) { var user = req.session.passport.user; if ( user != 'undefined' ){ ...

Struggling to interpret JSON data from an AJAX call using jQuery in a Python/Flask application

Currently, I am attempting to analyze a POST request sent via AJAX using jQuery in a python script. The structure of the request is as follows: request.js function get_form_data($form){ var unindexed_array = $form.serializeArray(); var indexed_ar ...

Guide on updating location and reloading page in AngularJS

I have a special function: $scope.insert = function(){ var info = { 'username' : $scope.username, 'password' : $scope.password, 'full_name' : $scope.full_name } $http({ method: &ap ...

Angular findIndex troubleshooting: solutions and tips

INFORMATION = { code: 'no1', name: 'Room 1', room: { id: 'num1', class: 'school 1' } }; DATABASE = [{ code: 'no1', name: 'Room 1', room: { id: 'num1', ...

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

Utilizing Vue alongside Laravel by passing null values as props

Is it permissible to provide a null prop? I have created a main component that accepts the user prop. <div id="app"> <master :user="{{ $user }}"></master> </div> The prop is declared as follows: props : { user: { ...

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

"TypeError: fs.existsSync is not a function" Whenever I try to create a CSV file and input some data into it, this error message pops up. const objectstocsv = require('objects-to-csv'); export default { data () { return { ...

Send a form without the need to reload the page

I have a form that inserts values into the database successfully. However, each time the values are submitted, the page refreshes. I attempted to find a solution on this website, but it didn't work for me. Can someone please advise me on how to submit ...

Only make an AJAX request for suggestions with jQuery Autocomplete if the item does not match any data from the previous request

I am currently working with jQuery Autocomplete functionality. The issue I am facing is that it triggers an AJAX request every time a key is pressed, which is not desirable. Ideally, if the data from a previous AJAX request already matches the search query ...

What is preventing me from closing modals when utilizing multiple ones at a time?

I'm currently working on setting up a Bootstrap 4 gallery. I want the images to be clickable and open in a larger version. Everything is working fine, but when I introduce multiple scripts, I can no longer close the modals. Here's the code I hav ...