Guide on how to easily add multiple images to plane segments using Three.js

I am curious if setting more segments in a Geometry instance of THREE.JS, such as:

new THREE.PlaneGeometry(1, 1, 10, 10);

You will notice that your plane is divided into 10x10 parts when wireframe mode is enabled.

Is it possible to apply various generated images (like map fragments) to each segment of a plane or another geometry object with different images?

I am interested in creating a single plane and adding multiple images to each segment to resemble a map. How can I achieve this? I am new to WebGL/THREE.JS so any guidance would be appreciated.

PS I am not talking about repeating the same texture on segments, but applying unique textures to individual segments of one geometry object.

Thank you for any advice!

javascriptgeometrythree.jstextureswebgl

Answer №1

To apply an image on a face, you can overwrite the UVs

geometry.faceVertexUvs[0].push([
        new THREE.Vector2( 0,0 ),
        new THREE.Vector2( 0,1 ),
        new THREE.Vector2( 1,1 ),    
        new THREE.Vector2( 1,0 ),    
]);

Specify the materialIndex for the face:

geometry.faces[i].materialIndex = i;
materials.push(material);

View the complete example in jsfiddle

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

JavaScript - Issue with the OnClick event not triggering

I encountered an issue while trying to change the class of an element using pure Javascript upon clicking it. Even though I have used similar code successfully in the past, this particular instance did not work as expected. Here is the relevant part of the ...

javascripthtmlcssfunctiononclick

Determine the viral coefficient based on the sharing platform being used, whether it is Facebook or Twitter

Traditionally, the viral coefficient is measured through email addresses. For example, if a current user [email protected] invites 10 people via email, you can track how many signed up and calculate the viral coefficient based on that. But what if th ...

phpjavascriptjquery

Invoking a synchronous JavaScript request to an MVC 4 Controller function

For the code I'm working on, I need certain functions to be executed sequentially. I attempted to use ajax calls but ran into issues due to their asynchronous nature. function GetLibraryActivities(libraryName, callback) { $.ajax({ dataTyp ...

javascriptjqueryajaxasp.net-mvc-4

Ensure the presence of an HTML element in a directive when conducting unit tests

I have developed a custom directive called "generate-form-field-directive" that dynamically generates a form field based on the type received. Here is the code snippet for the directive - (function () { "use strict"; var app = angular.module("appModule" ...

javascriptangularjsunit-testing

Can you explain the meaning of EPS in the THREE.OrbitControl function?

The this.update method within the THREE.OrbitControl script contains a private variable called EPS, which is used to adjust the phi angle. The following code snippet demonstrates how it restricts phi to be between EPS and PI-EPS: // restrict phi to be bet ...

javascriptthree.jswebgl

retrieving the current value of a variable from a jQuery function

I've done my best to keep things simple. Here's the HTML code I've put together: <div id="outsideCounter"><p></p></div> <div id="clickToAdd"><p>Click me</p></div> <div id="in ...

javascriptjquery

Embed a JavaScript file containing PHP code

Recently, I incorporated PHP into my JavaScript code, as shown below: var currentTotalContribution = <?php echo $myContribution; ?>; Now, I am interested in moving that content to my JavaScript file and importing it. I am unsure if this is achievab ...

javascriptphpjquery

Leveraging event listeners in conjunction with React's useEffect function

Check out the code example on Code Sandbox here Hey there, I'm trying to implement a feature where clicking a button inside a container displays a box. I've set up an event listener so that when you move your mouse outside the container, the box ...

javascripthtmlreactjstypescript

Is there a way to determine if a div is positioned 100px from the bottom edge?

When using the sticky class to stick a div, I encountered an issue where it sticks correctly from the top but overlaps the footer at the bottom. https://i.sstatic.net/28A3A.jpg Here is the HTML code: <div class="tab-content"> <div role="tab ...

javascriptjquerycss

conditional statement for manipulating data in javascript/html

I am working on appending results in an object as options in a datalist dropdown. While it is functioning correctly, the issue arises when not all elements have a specific level in the object consistently, impacting which results are added to the list. $( ...

javascriptjqueryhtml

Transformation of data structures

Is there a way to transform the array structure that represents parent-relation into a 2D array format? const array = [{id: 1, parentId: 2}, {parentId: null, id: 2}]; The goal is to create a new array where the first element of each nested array is the pa ...

javascriptarraysalgorithmtree

What is the method for determining the numerical worth of the px containers?

https://i.stack.imgur.com/0K2TD.png Total width of the bar is set to 500px, with the red box at a width of 150px, the yellow box at 200px, and the green box at 50px. CSS Styles: .box { float:left; width:150px; box-shadow:3px 3p ...

javascriptjqueryhtmlcss

What is the best way to eliminate a white border that appears only on my ThreeJS website when viewed on a mobile device?

I initially suspected a potential issue with resizing the window, so I created a JavaScript function to handle it. However, that did not resolve the problem. Any other ideas on how to troubleshoot this? // If the user resizes the window, update camera a ...

javascripthtmlcssthree.js

3.2+ Moodle communication and connections

I am facing a challenge with creating a new div @type@ in /message/templates/message_area_contact.mustache This is the code snippet: ... <div class="name"> {{fullname}} <div style="font-style:italic; font-weight:100;">{ ...

javascriptphpajaxmoodlemustache

Dynamically added input elements in AngularJS are causing issues when trying to retrieve the states of form input elements

<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function ...

javascriptangularjs

Tips for adjusting the dimensions of a map within the app.component.html

Within the code snippet below, my aim is to adjust the width and height of the map using the style tag shown here: <style> #map3 .map { width: 100%; height:90px; } </style> Despite trying various values for width an ...

javascriptangulartypescriptopenlayers

The absence of shapes in containers is noticeable in the stage setting

After spending some time troubleshooting the issue, I have encountered a problem with my code on JSFiddle Code. My goal was to place one large container on the stage that contains two smaller containers, each holding a shape. However, despite no errors bei ...

javascripthtmlcontainersshapeseaseljs

Is it possible to verify if a user is accessing a webpage through Electron?

If I were interested in creating a basic Electron application that notifies the user upon reaching example.com, is this achievable? If yes, then how can I determine if the user is on a particular webpage? ...

javascriptnpmelectron

What is the process for locating the src value of an image that has been uploaded utilizing fileReader?

I am currently working on a program that empowers the user to select an image for uploading. Once the user chooses an image, it activates the previewFile() function, which makes use of FileReader to display the selected image. Now, I'm in the process ...

javascriptimagefilereadersrccreateelement

Optimizing AngularJS ui-router to maintain state in the background

Currently working on an AngularJS project that involves a state loading a view containing a flash object. I am looking for a way to ensure that the flash object remains loaded in the background during state changes, preventing it from having to reload ev ...

javascriptangularjsangular-ui-router