Exploring the integration of different textures in three.js cube models

Could someone kindly review the code snippet below for three.js r53?

This code was referenced from a question posted here: How to use multiple materials in a Three.js cube?

I attempted to implement this code with slight modifications, but unfortunately I am not seeing the expected visible cubes. I have ensured that my texture images are correctly named.

var materials = [];

for (var i=0; i<6; i++) {
  var img = new Image();
  img.src = i + '.png';
  var tex = new THREE.Texture(img);
  img.tex = tex;

  img.onload = function() {
      this.tex.needsUpdate = true;
  };

  var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex});
  materials.push(mat);
}

var cubeGeo = new THREE.CubeGeometry(400, 400, 400, 1, 1, 1, materials);
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial());

Answer №1

Consider doing this instead:

let cubeGeometry = new THREE.BoxGeometry(400, 400, 400, 1, 1, 1);
let cubeMesh = new THREE.Mesh(cubeGeometry, materials);

materials should be an array containing 6 three.js materials, each representing a face of the cube.

For more information, refer to the Migration Guide: https://github.com/mrdoob/three.js/wiki/Migration-Guide.

UPDATE: The CubeGeometry has now been changed to BoxGeometry, and THREE.MeshFaceMaterial is no longer recommended.

Version used: three.js r.92

Answer №2

The CubeGeometry class does not allow for multiple materials to be assigned at once. Despite initial beliefs, after reviewing the source code it is apparent that this feature is not supported.

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

Create Vue.js components

I am facing a challenge. On the server, I have a list of technologies, and in my HTML file, I want to display them dynamically: <div v-for="(technology, index) in technologies" :key="technology.id" > technology-card v-if= ...

The Battle of Dynamic Components: React Versus Vue

When working with React, we have the ability to add dynamic components by following this method (taken from the React documentation https://reactjs.org/docs/jsx-in-depth.html): import React from 'react'; import { PhotoStory, VideoStory } from &a ...

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

I'm currently dealing with an issue where the computed style font-size of a particular element is "16px". I've been attempting to pinpoint where in the CSS or JavaScript this font size setting is coming from, specifically within one of its parent ...

Learn how to implement code splitting in a React application with webpack by exporting components using the syntax "export * from '...'"

In my React app, I recently implemented code splitting which has been working well. However, when analyzing the bundle size, I noticed an issue with how my components folder is loaded in the initial chunk. It includes all components, even those that are on ...

What is the most efficient method for managing components with dynamic templates and their corresponding data in Vue.js?

I have a question and requirement that I would like to discuss. It involves dynamically rendering templates and data using components. The scenario is as follows: The root Vue instance fetches data from the backend, and let's say the following data i ...

Utilize the findIndex method to search for an element starting at a designated index

Below is a snippet of code that I have: private getNextFakeLinePosition(startPosition: number): number{ return this.models.findIndex(m => m.fakeObject); } This function is designed to return the index of the first element in the array that has ...

I don't understand why my page loses all its design when I refresh it and it has a URL with an ID in vue-router

Whenever I try to redirect from the target component to the target-details component using a specific ID, I encounter an error when refreshing the page: javascript Uncaught SyntaxError: Unexpected token '<' app.js:1. Additionally, after cl ...

PHP warning: Notice: Offset not defined

After creating an API to retrieve data from a database and display it as JSON in HTML, I encountered some PHP errors while trying to echo the data: Notice: Undefined offset: 80 in /opt/lampp/htdocs/ReadExchange/api.php on line 16 Notice: Undefined offse ...

Ways to dynamically display commas and periods based on certain conditions?

I have three items that will be displayed conditionally. I need to include commas between them, with a period at the end if it's the last item. {this.state.a&&i++} {this.state.b&&i++} {this.state.c&&i++} {this.state.a && (i==1 ...

Is there a way to check for invalid string literals within a string?

Looking for a way to test for invalid (unclosed) strings within a given string? This regex might help: /"[^"\\]*(?:\\[\S\s][^"\\]*)*"|'[^'\\]*(?:\\[\S\s][^'\\]* ...

Keycloak encounters a CORS Access-Control-Allow-Origin issue

After successfully logging into Keycloak using the keycloak-js client, I encountered an error when attempting to make a fetch request. The error message received was: Access to fetch at 'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-con ...

The issue with 'this' not resolving correctly within a prototype method is causing unexpected behavior in the context of inheritance

I've created a constructor that extends a module in node.js called (https://github.com/fluxxu/evalidator). Within this extended constructor, I've defined two additional methods in the prototype, with **method B** calling method A using the ' ...

React Native bug: For Loop displaying only the initial element in the Array

I'm currently working on a function that is meant to iterate through 20 elements of an array called smn to display the elements that meet a specific condition. However, with my current code, I am only able to display the first element in the array: ...

JavaScript Password Form Submission - Enter your password in the form

I need assistance with setting up a password for a form. Users should be able to enter a password into a specified field, click submit, and if the password is correct, they will be redirected to buybutton.php in the same window. If the password is incorr ...

The issue with element.style.backgroundColor not functioning properly within WordPress

Struggling to make the background of a button change upon hover? I've got the code, but it seems to be working everywhere except in WordPress. Check out the code that should be working here: https://jsfiddle.net/TopoX84/3oqgmjb0/ Want to see it not ...

Extensive application featuring a complex form built with react-redux

Recently, I've been tasked with revamping a module at my company using react. This module consists of a single page that is made up of 4-5 different forms. The selections made in each form determine the appearance of the following form step. While th ...

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

Remove an item from an array in JavaScript by specifying its value, with compatibility for IE8

Is there a way to remove an item from an array by its value rather than index, while ensuring compatibility with IE8? Any assistance would be greatly appreciated. Thank you. Below is the array in question: var myArray = ['one', 'two', ...

Sending Values to a Function via Datatables Button

Is there a way to pass the value of a button in a datatables to a function? Currently, I am only able to get the value of the first row. Any assistance would be greatly appreciated. All I need is to alert the parameter and I will handle the rest. Here is ...

Angular: Issue with ng-model directive when used with `<span>` tag

Currently, I am facing a challenge while working on a web application that combines bootstrap and angular.js. The issue revolves around setting the default value of a span within the HTML code of one of the pages. In my previous experience, I utilized ng- ...