Issue with applying various textures to a Three.js cube

Hey everyone, I'm trying to add 6 textures on each face of my three.js cube following this thread: Three.js - Using CubeTextureLoader to create a different image on each face of a cube

Below is the code I am using:

scene = new THREE.Scene();
    var textureLoader = new THREE.TextureLoader();

    var texture0 = textureLoader.load( 'crate1.gif' );
    var texture1 = textureLoader.load( 'crate3.gif' );
    var texture2 = textureLoader.load( 'crate4.gif' );
    var texture3 = textureLoader.load( 'crate5.gif' );
    var texture4 = textureLoader.load( 'crate6.gif' );
    var texture5 = textureLoader.load( 'crate7.gif' );

    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 faceMaterial = new THREE.MultiMaterial( materials );

    var geometry = new THREE.BoxGeometry( 20, 20, 20,1,1,1 );
    var mesh = new THREE.Mesh( geometry, faceMaterial );

    scene.add( mesh );
    renderer = new THREE.WebGLRenderer();

Unfortunately, when I load the page, there is no cube being rendered at all. It seems to work fine when I use only one texture...

Answer №1

Check out this helpful jsfiddle example: http://jsfiddle.net/plotnik/8RtTy/3/

If you want to work with a single texture, start by initializing it in this way and then adjust:

mesh.material = faceMaterial;
mesh.material.needsUpdate = true;

Make sure to call render() afterwards.

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

Toggle classes on button click

<div class='fixed_button homes hidden'> <a class='btn btn-primary homes'>Continue &rarr;</a> </div> Using jQuery Library $(".homes").on('click', function(){ $("choose_style").addClass(&apo ...

Ajax transmits an array of data to the server

My table contains dynamic data with input fields for each item. I need to send the input field values along with the item's ID to the backend. Encountered Issue When making an AJAX request, the data sent as an array is not coming out as expected. Cod ...

Implementing a Where Condition in JavaScript with the MongoDB whereObj

Working on a project involving JavaScript and MongoDB has led me to a specific collection named test_collection. Within this collection, there is a field/object called test_field_1 which contains test_sub_field_1 and test_sub_field_2. Currently, I am sett ...

What is preventing me from using AJAX to input data into sqlite?

Implementing a local save feature in my Web App is proving to be quite challenging. Every time I attempt to send data in any form, I consistently encounter the following error: A builtins.TypeError occurs, followed by a stack trace in /SaveFile and jquery ...

Utilizing VueJS, Webpack, and the Power of Video

I'm running into an issue when attempting to use vue-cli with the webpack-simple template. Upon importing my video file: <video src="./assets/twp-logo-video.mp4" id="initial-logo" type="video/mp4"><!-- 700 x 700 --> </video> I en ...

Changes in query parameters on NextJS navigation within the same page do not activate hooks

When utilizing NextJS without SSR, I encountered an issue with basic navigation using different query parameters. Upon the initial arrival on the page/component, everything seems fine as the component gets mounted and URL params change accordingly. However ...

Incorporating multiple web services into a React JS project to populate a Material UI dropdown efficiently

I have some code that is calling a web service and I have a few questions. Firstly, what is the best way to call a second web service? Currently, I am calling one and displaying the data in a list. But if I need to call a second web service, should I also ...

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

Utilize Haxe Macros to swap out the term "function" with "async function."

When I convert haxe to JavaScript, I need to make its methods asynchronous. Here is the original Haxe code: @:expose class Main implements IAsync { static function main() { trace("test"); } static function testAwait() { ...

Trouble with sending semicolons in Node.js MSSQL/MSNodesqlv8 database queries

Trying to create a simple API for interacting with a MSSQL v12 database using Nodejs. Successfully connected to the database with the mssql/msnodesqlv8 package, but encountering issues with parameterized queries. code: 'EREQUEST', number: 102 ...

How can I automate the process of clicking each button on a page one by one simultaneously?

I'm looking for a way to add a small delay of 1 second after each button is clicked in my code. I want the buttons to be clicked one after the other, not all at once. How can I achieve this until all buttons are clicked? Below is the current code: v ...

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

Tips for Allowing Multiple Exports in a Vue 3 Single File Component

I am currently working on a Vue3 Single File Component for a customized list. Within this single file component, my objective is to export the main default Vue component along with an enum that declares the type of list it represents: child: <template& ...

How to ensure jQuery runs only once, even when the back button is pressed in the

How can I ensure that jQuery only executes once, even when navigating back to the page using the browser's back button? When my page initially loads, the jQuery runs fine. However, if I navigate away from the page and then return using the back button ...

Extracting the magnifying glass from the picture

After implementing a function to add a magnifying glass (.img-magnifier-glass) on button click, I am now looking to remove the glass by clicking the "cancel" button. However, I am unsure of how to write this function to interact with the "magnify" function ...

Unable to locate the JSON file for loading in ThreeJS

I am currently attempting to load an external model from Blender onto an Angular app using Three.js. I have been following a tutorial for guidance, found here. However, I have encountered an issue when trying to load the external file: loader.load('. ...

What could be causing ArrowHelper to miss its mark?

Why is the tip of the ArrowHelper slightly missing the target sphere instead of hitting it directly? Could it be that the direction calculation is not precise enough? var geometry = new THREE.SphereGeometry(1, 16, 16); var material = new THREE.MeshNormal ...

Managing date validation for a three-part field using AngularJS

I am currently working on validating a three-part date field using AngularJS. I have managed to create a custom validation function, but I am struggling with determining how the fields should update each other's status. How can I ensure that all thre ...

Angular: How can objects be efficiently stored in a service for display in the view and use of CRUD functions to interact with the server?

I am exploring different options for creating a service that retrieves relational data from the server. I have two potential approaches in mind, but I am having trouble deciding between them. The first option involves returning the data as a multidimensio ...

Creating a custom directive that encapsulates an Angular UI directive

I found a similar question but it lacks a satisfactory answer Can anyone explain why the uib-datepicker-popup directive isn't functioning as an Angular UI date picker in the code below? Is there a specific flag or compile option that I'm missin ...