Tutorial: Using Three.js to Assign a Unique Random Image to Each Side of Multiple Cubes

I am currently working on integrating a feature similar to the one demonstrated in this example:

While I have successfully implemented cubes, I am facing a challenge in applying different images to each cube.

My goal is to assign a "Blogger" icon to one cube, a "Facebook" icon to another cube, a "Twitter" icon to a third cube, and so on for additional cubes.

Although I have managed to map a URL to a single cube, I am struggling with mapping images when dealing with an Object3D group.

Considering my limited experience in WebGL and Three Js, any guidance or assistance would be highly appreciated. Thank you! :)

javascriptthree.js

Answer №1

This is the technique that has been used since r53:

const shape = new THREE.BoxGeometry( 100, 100, 100 );
const texture1 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image1.jpg' ) } );
const texture2 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image2.jpg' ) } );
const texture3 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image3.jpg' ) } );
const texture4 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image4.jpg' ) } );
const texture5 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image5.jpg' ) } );
const texture6 = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image6.jpg' ) } );

const material = new THREE.MeshFaceMaterial( [texture1, texture2, texture3, texture4, texture5, texture6] );

const cube = new THREE.Mesh( shape, material );

Answer №2

As of December 2017, the use of ImageUtils.loadTexture, MeshFaceMaterial, and CubeGeometry has been deprecated in Three.js. For more information on deprecated features, you can visit this link.

The new way to achieve the same result is as follows:

var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = [
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image1.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image2.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image3.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image4.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image5.jpg') }),
    new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('image6.jpg') })
];

var mesh = new THREE.Mesh(geometry, material);

For a detailed tutorial on this new approach, check out this YouTube video.

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

Creating a continuous loop in JQuery when clicking on a table row

I seem to be encountering an issue with what appears to be an infinite loop. My problem arises while trying to create a table dynamically using Ajax. Each row of the table contains a button alongside a thumbnail image and some text. I wish for the button ...

javascriptjqueryhtmlajax

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

javascripthtmlcss

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Hey there, I'm diving into the world of JavaScript and have set myself a challenge to create a simple bingo number machine. Check out my CodePen project here. I've successfully generated an array of 20 numbers, shuffled them, and added a marker t ...

javascripthtmlcss

"Users have reported that the Express body-parser feature sometimes results in req.body returning

I have developed a basic Express server that utilizes the body-parser module to access POST parameters. Here is how my application is structured: /index.js: 'use strict'; const express = require('express'); const app = express(); con ...

javascriptnode.jsexpressbody-parser

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Create a React component using the value stored within an object

I am interested in creating an object: import React from "react"; import { Registration } from "../../"; const RouteObj = { Registration: { route: "/registration", comp: <Registration /> } }; export default RouteObj; Next, in a separat ...

javascriptreactjs

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Large size causing alignment issues with Bootstrap Tooltip位置混乱

I've encountered an issue with the bootstrap tooltip while using fullcalendar.js. The problem isn't with the fullcalendar library itself, as I included it just to provide context. You can view the problem on this JSfiddle link. The tooltip keeps ...

javascriptcssbootstrap-4tooltip

Display Material checkbox based on a condition

I have integrated Material UI into my React application to dynamically display text and other information by using JSON data. { "included": [{ "name": "someName", "price": "0", "required": true } ...

javascriptreactjsmaterial-ui

403 Error Code - Access Denied when trying to access Cowin Setu APIs

While attempting to create a covid vaccine alert using the Cowin Setu API (India) in nodejs, I encountered a strange issue. Every time I send a get request, I receive a 403 response code from cloudfront stating 'Request Blocked', although it work ...

javascriptnode.jsexpressamazon-cloudfrontrest

Setting up a Form submit button in Angular/TypeScript that waits for a service call to finish before submission

I have been working on setting up a form submission process where a field within the form is connected to its own service in the application. My goal is to have the submit button trigger the service call for that specific field, wait for it to complete suc ...

javascriptangulartypescriptasync-await

Tips for moving text within a Canvas using a button to trigger the function that displays the text in a Javascript environment

Within my HTML, there is a canvas element with the id="myCanvas". When a button is clicked, it triggers this particular function: function writeCanvas(){ var can = document.getElementById("myCanvas"); var ctx = can.getContext("2d"); va ...

javascripthtmlcanvasjavascript-objects

Using AngularJS to implement a clickable functionality within a directive

Currently, I am in the process of implementing a drag-and-drop directive. When an element is dropped, I am adding a copy of that element to my div and appending the ng-click attribute to it in this manner: copy.append('<button class="close" ng-cli ...

javascriptjqueryangularjsdirective

Retrieve the HTML contents of a cell that contains a checkbox with the value of "jquery"

Here is an example of a table row: <tr> <td><input type='checkbox' name='post[]' value="1"></td> <td>08-Apr-2014</td> <td>injj team</td> <td>merchant.testyy.com</ ...

javascriptjqueryhtml

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

TestComponent.ts export class TestComponent implements OnInit, AfterViewInit { constructor( private scroller: ViewportScroller, ) {} scrollToAnchor() { this.scroller.scrollToAnchor('123456789'); } } HTM ...

javascriptangularangular14

Angular, display the chosen option within the text input field

Currently, I have a table with multiple columns and I am using Angular JS to display their values in various controls. For instance, I am using a Select/Option (multiple) to display column A, and I want to use another text box to display column B based on ...

javascriptangularjs

Adjusting a NodeJS module for easier integration into codebases

I have organized some functions in a file within a node module structure... Here are the files and folder structure I created: - package.json - README.md - LICENSE.md - code |_______ code.js Currently, to use these functions, I include them like th ...

javascriptnpmnode-modules

Is it possible to modify the local reference point of an object in three.js?

Is there a method to readjust the center point of an STL file once it has been relocated or turned? For example, if the original rotation of my object is set at (0,0,0), and then I rotate it to (20,70,90) degrees, is it possible to modify the local origi ...

javascriptthree.jsrotation

The step-by-step guide on passing arguments and fetching results from Angular UI Bootstrap Modal through Components

I am facing a simple scenario where I have defined a modal as a component and opened that modal using `uiModal.open`. However, when I try to pass custom data to the modal using "resolve" in the open method and arguments in the controller constructor, the d ...

javascriptangularjsangular-ui-bootstrapui.bootstrap

Exploring the functionalities of the useState object with mapping techniques

While attempting to convert my class-based component to a functional style, I encountered the following code: const [foo, setFoo] = useState(null); const [roomList, setRoomList] = useState([]); useEffect(() => { setRoomList(props.onFetchRooms(props.to ...

javascriptarraysreactjsreduxreact-hooks