Navigating through a large number of distinct items in Three.JS

I have hit a roadblock in my project development. I am striving to create a level using various phong materials on objects of unique sizes and shapes. However, Three.JS's default texture handling causes them to stretch out and look distorted on meshes that are not a perfect 1:1:1 ratio. To work around this issue, textures can be loaded with repeat options. But with over 100 objects of different sizes, each requiring unique repeat settings for their materials, hundreds of textures would need to be loaded, consuming a lot of memory. I need assistance in finding a solution to efficiently handle a large number of objects with different geometries and textures. How can I apply unique repeat settings to a single texture based on the material? Even if this problem is solved, I still need to repeat this process for at least 5 textures per material, resulting in a significant number of texture variations. This is a major challenge.

I am feeling quite desperate about this issue and am considering switching to Unity or UE4 if I cannot manage to handle objects in bulk.

I am willing to completely overhaul my code from scratch. While it may not be perfect, I want to showcase how I work with objects in THREE.js. The following code snippet is just an example of my approach:

var energyRockMaterial =
  new THREE.MeshPhongMaterial(
    {
        envMap: scene.background,
        map: new THREE.TextureLoader().load("energyrock.jpg"),
        normalMap: new THREE.TextureLoader().load("energyrocknormal.jpg"),
        aoMap: new THREE.TextureLoader().load("energyrockao.jpg"),
        specularMap: new THREE.TextureLoader().load("energyrockspecular.jpg"),
        emissiveMap: new THREE.TextureLoader().load("energyrockemissive.jpg"),
        color:"#ffffff",
        emissive:"#bb00bb",
        specular:"#000000",
        reflectivity:1,
    });
var energyRockGeometry = new THREE.BoxBufferGeometry(1,1,1);
var energyRockMesh = new THREE.Mesh(energyRockGeometry,energyRockMaterial);
scene.add(energyRockMesh)

Apologies for the formatting issues with the code snippet. Thank you for your understanding.

Any assistance or advice provided would be greatly appreciated.

Answer №1

To understand UV mapping, it is important to familiarize yourself with the concept of texture coordinates assigned to vertices. These coordinates dictate how a texture is mapped onto a mesh, allowing the renderer to accurately display the texture on the surface of the object.

When working with THREE.js, you can utilize UVs in both Geometry and BufferGeometry, with the latter being more user-friendly for this task. The advantage of using UVs is that a single material can be applied to multiple shapes, each mapping the texture uniquely based on their individual UV coordinates.

Furthermore, exploring the use of a texture atlas may be beneficial, especially if dealing with multiple textures for different shapes. By consolidating textures into a single image file within a material, each mesh can utilize its specific UVs to map to the corresponding texture section within the atlas.

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

How can I match all routes in Express except for '/'?

I've been working on implementing an authentication system for my app that involves checking cookies. My approach was to use router.all('*') to handle every request, verify the cookie, and then proceed to the actual handler. However, I encou ...

Dealing with CORS, IIS7, and PHP - Overcoming the Access-Control-Allow-Origin obstacle

I am attempting to enable another local host (such as javascript.dev) to make a xhr request to this particular host, which operates on an IIS7 server. When I perform a curl -I command, the headers I receive are as follows: HTTP/1.1 200 OK Content-Length: ...

Problem with Angular2, NodeJS, and Passport Integration

At the moment, my Angular2 front-end is running on localhost:3000 while the NodeJS back-end (using KrakenJS) is running on localhost:8000. When I input the credentials and make a call to the this.http.post('http://localhost:8000/login', body, { h ...

What benefits does registering a Vue component locally provide?

According to the Vue documentation, global registration may not always be the best option. The documentation states: Global registration is not always ideal. When using a build system like Webpack, globally registering all components can result in unnece ...

Firebase 9 - Creating a New Document Reference

Hey everyone, I need some help converting this code to modular firebase 9: fb8: const userRef = db.collection('Users').doc(); to fb9: const userRef = doc(db, 'Users'); But when I try to do that, I keep getting this error message: Fir ...

Encountered a buildkite error stating that the plugins file is either missing or invalid, resulting in a failure to locate the module 'xlsx' when executing a cypress test. Strangely

Encountering an issue while running my Cypress test on Buildkite. Here's the error message: Status: Downloaded newer image for cypress/included:6.1.0 [2022-01-31T10:32:13Z] Your pluginsFile is set to /e2e/cypress/plugins/index.js, but either the fil ...

Utilizing Google Analytics within an Angular Single Page Application

After implementing Google Analytics (GA) in my Angular single page application and placing the tracking code at the bottom of the main index.html, I encountered an issue regarding incorrect pageview results. <script> (function(i,s,o,g,r,a,m){i["Go ...

react-leaflet LayerSelection creates redundant entries in table

Here is the React version I am using: 16.0.0 And for react-leaflet: 1.6.6 I recently attempted to implement a layer controller on my map which consists of two layers, each containing multiple markers. Below is an example of what I have been working on. i ...

What is the method for dynamically updating and showcasing a JSON file upon the click of a button?

I'm currently developing an add-on that will display a panel with checkboxes and a save button when a toolbar button is clicked. The goal is to allow users to select checkboxes, then save the selected data in a JSON file that can be accessed and updat ...

Generating JSON Data with the Power of JavaScript and JQuery

Looking to dynamically generate a JSON Object with the specified structure: { "deleteId":[1,2,3], "pointId":[1,2,3], "update":[ { "what":"mission", "id":1, "value":"adsda" }, { ...

Is MapView in React Native restricted to explicit markers only?

I'm facing a challenging problem while working on my app's mapview. I have been struggling to find a solution for dynamically repopulating the mapview. Initially, I attempted the following approach: render() { const dynamicMarker = (lat, long, ...

JSX Script issue: the input prompt is missing

Greetings! I am currently working on a script to export JSON files from Adobe Illustrator. // Custom function for exporting prefixed objects function exportPrefixedObjects(doc) { // User input for prefixes and reference points var prefixInput = prompt( ...

Allowing access from different domains when using Angular.js $http

Whenever I encounter a CORS issue while developing a webapp, my go-to solution is to brew some coffee. However, after struggling with it for some time, I am unable to resolve the problem this time and need assistance. Below is the client-side code snippet ...

Exploring the method of extracting multiple checkbox values from an HTML form

While I'm aware that jQuery can be used to retrieve checkbox values when there are multiple checkboxes, the solutions available online don't seem to work for me. This is because my checkbox inputs are embedded within an HTML form, and none of the ...

The Facebook Comments feature on my React/Node.js app is only visible after the page is refreshed

I am struggling with getting the Facebook Comment widget to display in real-time on my React application. Currently, it only shows up when the page is refreshed, which is not ideal for user engagement. Is there a way to make it work through server-side r ...

What is the reason for the lack of user data being saved in studio3t?

I'm struggling to identify the issue in my app development process. I'm creating an application that collects user email and password, storing them in a database. The problem lies in the fact that while user passwords are successfully stored, the ...

Save and retrieve documents within an electron application

Currently, I am developing an application that will need to download image files (jpg/png) from the web via API during its initial run. These files will then be stored locally so that users can access them without requiring an internet connection in the fu ...

customizing highcharts title within a popup window

Is there a way to dynamically set the title of a Highcharts chart from an element? Check out my code snippet below: $(function () { var chart; $('#second-chart').highcharts({ chart: { type: 'bar' }, subtitle: { ...

JavaScript Filtering Technique

Attempting to compose an array of names for a search output page The json arrangement looks like this: data = { "artists": [ { "artistName": "a" }, { "artistName": "b" }, { "artistName": "c" }, { "artistName": "d" }, { "artistName" ...

Using a Python list as an argument in a JavaScript function

How can I pass a python list as an argument to a JS function? Every time I attempt it, I encounter the error message "unterminated string literal". I'm baffled as to what's causing this issue. Here is my python code (.py file): request.filter+= ...