Numerous entities in motion, each adorned with its own accompanying text

I have been experimenting with the interactive cubes and recently implemented a click function that directs to specific links. Now, I am interested in assigning distinct text to each cube as a material when rendered. Currently, I am using a single material and considering creating an array for all possible materials. However, whenever I try to reference this array in the mesh object-building parameters, I encounter an error stating 'setHex() is undefined' in the console. How can I associate a unique material with each cube?

<html lang="en">
  <head>
    <title>Customized Text on Interactive Cubes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Arial;
        background-color: #ececec;
        margin: 0px;
        overflow: hidden;
      }

      div#stats{
        display:none;
      }

      p{
        position:absolute;
        top:50%;
        left:50%;
      }
    </style>
  </head>
  <body>
    <script src="../build/three.min.js"></script>
    <script src="js/renderers/Projector.js"></script>
    <script src='../build/threex.dynamictexture.js'></script>
    <script src="js/libs/stats.min.js"></script>

    <script>

      // Javascript code goes here

    </script>

  </body>
</html>

Answer №1

The issue doesn't lie with the array itself, but rather with the object inside the array. Consider the following solution:

var materialArray = [];
  materialArray.push(new THREE.MeshBasicMaterial({
    map: dynamicTexture2.texture,
    color:Math.random() * 0xffffff,
    name: "box1",
  }));
  //...
  var newObj = new THREE.Mesh( geometry, materialArray[0] );

If you wish to create multiple cubes with varying materials, you'll need to generate separate objects instead of reusing object. It's possible to encapsulate all object creation and positioning logic within a function, with the unique material as a parameter.

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

I found myself puzzled by the error message "Module protobufjs not found."

I am currently utilizing the node library known as node-dota2. I have completed all the necessary steps required by node-dota2, as outlined on this site: https://github.com/Arcana/node-dota2#installation-and-setup 1. Installed it using npm 2. Created a fil ...

Is it possible to populate an empty list of objects within the Page_Load scope after the page has finished loading?

I am facing a challenge where I need to populate the list var docfiles = new List<string>(); with file names uploaded by the user using dropzone js. However, the list remains empty because when the page loads for the first time, httpRequest.Files.C ...

When working with NodeJS, Express, and MySQL, it is important to avoid setting headers after they have already been sent

I am working on a NodeJS application using Express and here is the relevant code snippet. app.post('/open', checkStatus, function(req, res) { if (req.error) { console.log(req.log); return res.json(req.error); } console.log(current ...

Send a PUT request using Ajax

I am a beginner when it comes to Ajax requests and I have crafted the code shared in this Pastie. On line 107, my $.PUT function is causing an error in Firebug stating that $.PUT is not a recognized function. I acknowledge that there are issues with my aja ...

Modify the properties of an element based on another

Situation : I am facing a challenge where I need to adjust two components based on a click event. The function linked to the onclick event handleChange includes a prop 'text'. Each time the onclick event is triggered, I must modify the value of t ...

JavaScript checking the current page's URL is crucial for maintaining accurate and dynamic

I've attempted to verify the URL using this specific function. It functions properly with single text, but fails when a URL is inputted. jQuery(document).ready ( function () { //var regExp = /franky/g; //It works fine ...

When you click on the "email" link, the Email app will automatically launch

Is there a way I can make the "EMAIL" text clickable in HTML, so that it automatically opens an email app or site and inserts the clicked email into the "To:" field? ...

The client sent a risky Request.Path value that raised red flags

For a university project, I am attempting to access an English translation of the Quran from quran.com using the provided link: Although this link works correctly when entered directly into a browser, I encounter an error when trying to use it in my Angul ...

How to optimize the utilization of Javascript variables within a Jquery function?

Currently, I am working on implementing an HTML5 min and max date range function. Initially, I wrote the code using variables and then embedded them in the correct attribute locations. However, after reviewing my code, my client (code reviewer) suggested ...

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

Exploring ways to update the navigation bar upon scrolling to shrink its size and modify the color scheme (specifically, transitioning from a transparent background to white and altering font colors). Below is the HTML snippet: /* Defining the overa ...

Unable to establish connection with Uploadthing due to a timeout error

I am facing timeout errors while setting up the upload feature. app/api/uploadthing/core.ts import { createUploadthing, type FileRouter } from "uploadthing/next"; import { auth } from "@clerk/nextjs"; const handleAuth = () => { c ...

How can you assign a strokeStyle color to a Canvas using a CSS property?

Our team is currently working on an Angular2 / Ionic 2 project where we have implemented a HTML Canvas element that allows users to draw on it. One challenge we are facing is how to set the Canvas strokeStyle property using a color provided by a CSS style. ...

Simple steps to load various json files into separate json objects using node.js

I am new to working with Json and node.js My goal is to load a json file into a JsonObject using node.js, but I have been struggling to accomplish this task. I have created two files, one named server.js and the other jsonresponse.json. My objective is t ...

What is the correct way to execute a jQuery trigger on a checkbox or radio button to simulate a user clicking on it?

My current page utilizes can.js, making it challenging to replicate the issue on jsfiddle.net. The result I am experiencing is as follows: When I click on a checkbox (or even a radio button), an input text box should update accordingly (for example, displ ...

Executing a function immediately upon the start of a new month in JavaScript (Node.js) without relying on any external libraries?

Is it possible to automate the process of creating a document in MongoDB using Mongoose every 1st of a new month, ideally as soon as the date changes without relying on third-party libraries like needle or cronjob? Can this be achieved solely with setInter ...

Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element. I have attempted to ...

How do I connect to a different application's view?

When working with a view that has tiles, I am looking to click on one of them and be directed to a different application that I have created. In typical cases, I would specify the view folder for navigation. However, when attempting something similar for ...

Falling rain animation in JavaScript

I'm a beginner in the world of JavaScript and I'm trying to create a div on a webpage with a rain effect. I've managed to generate random blue points within the div, but I'm struggling to make them move downwards. Here's the code I ...

Extracting specific key-value pairs from JSON data

Working with JSON data, I encountered a need to pass only specific key-value pairs as data to a component. Initially, I resorted to using the delete method to remove unwanted key-value pairs, which did the job but left me feeling unsatisfied. What I truly ...

Angular2 Navigation Menu

I have a side bar and I want its children to appear when the user clicks on the parent. For example, clicking on LinkTest should display its corresponding content as block. You can check out the Angular and Typescript code snippet at this link: http://jsfi ...