Applying unique textures to individual sides in Three.js

Here is the code for my textured cube:

const textureLoader: TextureLoader = new TextureLoader();
const textureArray: MeshBasicMaterial[] = [
  new MeshBasicMaterial({ map: textureLoader.load("./model/front.jpeg") }),
  new MeshBasicMaterial({ map: textureLoader.load("./model/back.jpeg") }),
  new MeshBasicMaterial({ map: textureLoader.load("./model/top.jpeg") }),
  new MeshBasicMaterial({ map: textureLoader.load("./model/bottom.jpeg") }),
  new MeshBasicMaterial({ map: textureLoader.load("./model/left.jpeg") }),
  new MeshBasicMaterial({ map: textureLoader.load("./model/right.jpeg") }),
];

textureArray.forEach((_, index) => {
  textureArray[index].side = BackSide;
});

const cubeGeometry: BoxGeometry = new BoxGeometry(5, 5, 5);
const cube: Mesh = new Mesh(cubeGeometry, textureArray);
scene.add(cube);

I have not encountered any errors and the screen remains black. Can you help me identify the issue?

The bundler I am using is parcel.

javascriptthree.js3d

Answer №1

Here is a simple way to try it out:

let camera, scene, renderer;
let mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  const textureLoader = new THREE.TextureLoader().setPath('https://example.com/textures/');
  const materials = [
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image1.jpg")
    }),
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image2.jpg")
    }),
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image3.jpg")
    }),
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image4.jpg")
    }),
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image5.jpg")
    }),
    new THREE.MeshBasicMaterial({
      map: textureLoader.load("image6.jpg")
    }),
  ];

  materials.forEach((_, index) => {
    materials[index].side = THREE.BackSide;
  });

  const cubeGeometry = new THREE.BoxGeometry();
  mesh = new THREE.Mesh(cubeGeometry, materials);
  scene.add(mesh);

  //

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);

}
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>

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

In Vue(tify), transitions require children to have keys, but in this case, there are no tags present as children

Trying to implement a transition on a list using Vue and Vuetify, but encountering the error message vue.runtime.esm.js?2b0e:619 [Vue warn]: <transition-group> children must be keyed: <v-card> I attempted the Vuetify approach <v-fade-transi ...

javascriptvue.jsvuejs2vuetify.js

Choose the tab labeled "2" within a segment of the webpage

index.html#section takes you to a specific section of a webpage. However, I am interested in picking the second tab within a section of the page. I'm uncertain if this can be achieved without relying on JavaScript, but employing the Tab Content Script ...

javascripttabs

Switch color in Material-UI based on props

Utilizing code inspired by the Material-UI documentation on customizing the switch, you can customize the switch color to be blue: import React from 'react' import Switch from '@material-ui/core/Switch' import {withStyles} from '@ ...

javascriptreactjsmaterial-uiuiswitch

Looking to determine if a specific element is assigned multiple class names

Help needed! Can you tell me how to check if an element contains more than one classname using pure javascript, without using jQuery? For example: If #test has both the classnames "classA and classB", then { alert(true) } else { alert(false) } Here is ...

javascriptjqueryhtml

AngularJS Component enthusiasts

While going through a tutorial on the Angular UI Router GitHub page (link: https://github.com/angular-ui/ui-router), I came across an intriguing code snippet: var myApp = angular.module('myApp', ['ui.router']); // For Component users, ...

javascriptangularjsangular-ui-router

Angular Transclude - ng-repeat fails to iterate over elements

Recently, I've been experimenting with Angular directives and encountered a peculiar issue... Check out the code snippet below: <!DOCTYPE html> <html> <head> <title>Directive test</title> <script type="text/ja ...

javascriptangularjsangularjs-ng-transclude

Can a repetitive 'setTimeout' function invocation ultimately cause the JS Engine to crash?

Imagine a scenario where I require data from the server every 10 seconds. A function would be created to fetch the data using AJAX, and then setTimeout would be used to schedule the function to run again: function RetrieveData(){ $.ajax({ url: " ...

javascriptrecursionsettimeout

Maintain the webpage content even after submitting a form with a file attachment on the same page

I am in the process of creating a secure webpage exclusively for our members. This page will allow members to access their personal data stored in the database and upload files as needed. One concern I have is how to return to the member page with all the ...

javascriptjqueryhtml

Using AngularJS with angular-google-maps to easily add markers through a form and locate your position with one click

I'm attempting to replicate the functionality demonstrated on since it fulfills 90% of my requirements. However, I'm facing some difficulties. While I can retrieve my location and log it in the console, a marker is not appearing on the map. Add ...

javascriptgoogle-mapsangularjs

Field must have a base type specified to proceed

Currently, I am in the process of developing a discord.js bot. The structure I have set up involves a folder that contains all the commands, and when a command is called, index.js directs it to the appropriate file. However, when attempting to run the bot, ...

javascriptnode.js

Python and JavaScript fundamental interaction

My current setup involves having a local HTML page named leaflet.html, which is being shown in an embedded browser within a python-tkinter application. Within the leaflet.html file, there exists a straightforward JavaScript code snippet that includes a fu ...

javascriptpythonleaflet

Angular directive ng-template serves as a component type

In the code snippet below, <!DOCTYPE html> <html> <head> ..... </head> <body ng-app="app"> <script type="text/ng-template" id="my-info-msg.html"> <s ...

javascriptangularjsangularjs-ng-template

The canvas grid is malfunctioning and failing to display correctly

My current code allows me to draw a grid on a canvas with multiple lines, but I'm encountering an issue when trying to render 25 or more lines - some of them don't appear on the canvas. This problem becomes more noticeable when there are 40 or mo ...

javascripthtmlcanvashtml5-canvas

A guide to defining a color variable in React JS

I am trying to use a random color generated from an array to style various elements in my design. Specifically, I want to apply this color to certain elements but am unsure how to do so. For example, I know how to make a heading red like this: const elem ...

javascripthtmlcssreactjssaas

The React Apexchart fails to correctly adjust its height based on its parent container when set to 100%

Currently, I am working with react-apexcharts and facing an issue where I am trying to set the height of the chart to be 100% of its parent element. However, instead of taking the height from its parent, it is only showing a minimum height of 445px. Even a ...

javascriptreactjsapexcharts

Omitted Script within a Node.js JavaScript Code Segment

My code snippet is: function write_to_orchestrate(data_to_write) { console.log('more testing'); db.put('musician', '1', '{"test":"test1"}') .then(function (result) { res.send(result); ...

javascriptnode.js

Global Path in Helmet Content Security Policy is not functioning as expected

I recently implemented Helmet to establish content security policies for my web application using Express in the backend. The specific policies are as follows: const express = require("express"); const app = express(); const helmet = require('helmet&a ...

javascriptexpresscontent-security-policywebsecurityhelmet.js

JavaScript unable to remove cookie from system

I'm currently on an external website and attempting to use JavaScript to remove a cookie. Here's what I tried in the console: function deleteAllCookies() { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length ...

javascriptcookies

What is causing my grayscale function to only impact part of the canvas?

As a beginner programmer, I have been experimenting with creating a grayscale function in JavaScript for practice. This is the code I have come up with: <canvas width='400' height='400'></canvas> <script> var can ...

javascripthtmlcanvas

AngularJS ng-map defines the view position using rectangular coordinates

Is there a way to set the position of ng-map view using the ng-map directive not as the center value of [40.74, -74.18], but instead as a rectangle defined by the corner values of the map view (north, south, east, west)? Currently, I have this code: < ...

javascriptangularjsgoogle-mapsng-map