Utilizing Three.js to assign a unique image to the surface of every face on every cube within a collection of cubes

Hello everyone, I'm just starting out with three.js and WebGL so please be patient with me :)

I was able to create a cool visual effect by mapping 6 images to the faces of a cube using this example as a reference: . The result can be seen here:

Now, I'm trying to take it a step further by randomly applying a set of 12 images to each face of multiple cubes. After doing some research, I'm not certain if this is achievable, so I would appreciate any insights or confirmation on this matter.

Below is the code snippet I currently have:

// Insert your code snippet here

Any help or suggestions are greatly appreciated!

Answer №1

Are you looking to randomize the images in your project?

// create Array of different image materials.  
var images = [
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '1.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '2.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '3.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '4.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '5.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '6.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '7.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '8.jpg' ) } )
];
group = new THREE.Group();
for ( var i = 0; i < 60; i ++ ) {
  // clone the array so we can select unique images for each cube.
  var clone = images.splice(0);
  var newArray = [];
  for(var j = 0, j < 6, j++){
    newArray[j] = clone.splice(Math.floor(Math.random() * clone.length-1), 1);
  }
  // create material.
  var material = new THREE.MeshFaceMaterial(newArray);
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = Math.random() * 1000 - 500;
  mesh.position.y = Math.random() * 1000 - 500;
  mesh.position.z = Math.random() * 1000 - 500;
  mesh.rotation.x = Math.random() * 2 * Math.PI;
  mesh.rotation.y = Math.random() * 2 * Math.PI;
  mesh.matrixAutoUpdate = false;
  mesh.updateMatrix(); 
  group.add( mesh );
}
scene.add( group );

This code is experimental, but it demonstrates the concept.

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

Can you guide me on using protractor locators to find a child element?

Could you provide a suggestion for locating the <input> element in the DOM below? I have used by.repeater but can only reach the <td> element. Any additional protractor locator I try does not find the <input> element underneath. Thank y ...

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

In Laravel Blade, I am looking to display a Modal popup and dynamically pass data based on the user's ID

When a user clicks on the "View Details" Button, I need to display a popup modal with information specific to that user. The data for each user is stored in the $user variable. I would like to achieve the same functionality as demonstrated on this website ...

Steps for retrieving multiple documents from Firestore within a cloud function

In my cloud function, I have set up a trigger that activates on document write. This function is designed to check multiple documents based on the trigger and execute if/else statements accordingly. I have developed a method that retrieves all documents u ...

setting the minimum date for a datepicker

Does anyone know how to set the minimum date for a calendar to be 2 days from the current date? For example, if today is the 27th, the minimum date should be the 29th. Any suggestions? Thanks. https://i.sstatic.net/7yHhH.png #html code <mat-form-field ...

What could be causing the disc to appear twice on the rendered geometry in the three.js sample when we have front and back culling enabled?

https://i.sstatic.net/lVlfW.pngWhen I did doubleSide rendering with depthTest off, it caused my geometry to generate a rounded disc. I am intrigued by the mathematical explanation behind this phenomenon. Despite the fact that my object is not transparent, ...

The component contains a render method, however, it does not inherit from React.Component

A component is displaying a render method, however it does not extend React.Component. This may lead to potential errors. Please modify <Test> to extend React.Component instead. When utilizing the extends-classes library, it results in a react compo ...

Unable to access the store from the Redux library within a React application

I decided to test out the Redux example from the official React-Redux website, which can be found HERE, using the following JavaScript code: // index.js import React from 'react' import ReactDOM from 'react-dom' import TodoApp from &ap ...

What is the process for programmatically injecting a search query to activate the places_changed event for the Google Maps API?

Currently, I am working on a search page that includes a location input field. My goal is to automatically populate this input with a query if a user reaches the page from another source with a search query. Additionally, I want to trigger a place change e ...

Error: Invariant violation caught - rendering of additional hooks compared to previous render

One of my components has a simple structure like this: const component = (props: PropTypes) => { const [allResultsVisible, setAllResultsVisible] = useState(false); const renderResults = () => { return ( <section> ...

Revise the line graph

Currently, I am utilizing dimple js and have a line chart code. However, there seems to be an issue with the event I set up - whenever a button is clicked, the chart should redraw using chart.draw(), but this function doesn't seem to work. Any insight ...

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

The issue of an undefined Node.js variable post "await"

While I know similar questions have been asked before, I assure you that I've gone through them; however, I'm still facing a challenge. I have a simple code snippet to retrieve a token for a 3rd-party API service: let tok = ''; const g ...

What sets usePreloadedQuery apart from useQueryLoader?

I've been exploring graphQL and the react-relay library. These are the key points I've covered: Rendering Queries: where usePreloadedQuery is introduced. Fetching Queries for Render: where useQueryLoader is introduced. To keep it simple, I&apo ...

The wrapping of cells in React Material UI GridList is not functioning properly

While working with Material-UI GridList, I've encountered an issue where the cells don't wrap correctly within the grid. Upon inspecting the CSS, I noticed that it utilizes flex-wrap, which is intended to flex rows. However, I believe there must ...

What are the steps to make a basic three-dimensional coordinate visualization?

I need help with displaying X/Y/Z coordinate data on screen. While I know about three.js, the examples I've come across are too complex for my needs and I haven't found a beginner-friendly tutorial yet. Although I'm open to other options, t ...

Order of Loading WebResources in ScriptControl

As I work on integrating a new control into a project that already contains ASP.Net controls, I am faced with the challenge of managing multiple .Net classes and JavaScript files. Each control consists of a .NET class (inheriting ScriptControl) along with ...

Is it a mistake to gather errors together and send them to the promise resolve in JavaScript?

When processing a list in a loop that runs asynchronously and returns a promise, exiting processing on exception is not desired. Instead, the errors are aggregated and passed to the resolve callback in an outer finally block. I am curious if this approach ...

jQuery.clone() Internet Explorer issue

I have a scenario where I use jQuery.clone() to extract the html of a page and then append it to a pre tag. Surprisingly, this operation works perfectly fine in Firefox and Chrome, but there's no response when it comes to IE: <!DOCTYPE html> &l ...