Set of tiles in Three.js

Is there a way to map a texture to only part of an image instead of the entire image when working with terrain textures that are all of equal sizes in Three.js? I am aware of work-arounds, but wondering if there is a built-in method for achieving this.

var image = new Image();
image.onload = function () {
    texture.needsUpdate = true;
};
image.src = path;
var texture = new THREE.Texture(image, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter);

return new THREE.MeshBasicMaterial({
    map: texture
});

Answer №1

In short, Three.js does not natively support multiple textures on a single mesh.

One simple solution is to divide the mesh into separate parts. Alternatively, if you need to use fewer than 16 textures, you can utilize a shader material.

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

Converting an associative array in JavaScript to a string map in C++ with Swig: A step-by-step guide

In a situation quite reminiscent of this query, I am aiming to wrap a function using SWIG that accepts a map of strings to strings: void foo(std::map<std::string, std::string> const& args); Creating an alias for the map suffices for Python: na ...

React/Redux does not retain previous items with Infinite Scroll

I am currently facing an issue where the new set of items loaded from the reddit API using Infinite scrolling overrides the previous items when the user scrolls to the bottom of the page. Although the new items load successfully, they replace the existing ...

Having trouble viewing the search field text in Firefox 3.6?

The customized search form in this version is inspired by the default twenty eleven Wordpress one. While the default text appears almost everywhere, it may not be displayed properly in older versions of Firefox and Internet Explorer. This could be due to ...

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

Executing a node.js script on a webpage

Recently, I have begun utilizing the Twilio platform to send SMS messages to my users. I am able to successfully run the node.js file from the node terminal using the command: node twilio.js However, my ultimate goal is to enable sending SMS messages di ...

Challenges Arising from Modifying State Array within React Component

Description: I have encountered a challenge when trying to update a state array within a React component, especially when dealing with 2D arrays. Despite following the recommended approach of immutably updating state using setState, I am experiencing diff ...

Is there a way to calculate the word frequency in my text using plain JavaScript?

Welcome to the text entry section: https://i.sstatic.net/VlBvt.png After clicking on the COUNT button, it will direct you to this page: https://i.sstatic.net/sqKWc.png I can see my entered text and word count displayed. Now I'm curious, how can I ...

What is the best way to center the navigation buttons on a responsive slider that spans the entire width of

Issue I am facing a challenge in responsively aligning the previous and next navigation buttons using Owl Carousel v2. I need these buttons to fit within the offset column of the centered container and maintain their overlay position down to 767px, instea ...

Steps for incorporating extra attributes based on the given text

Here is some of my HTML code: <div id="ccc_new_val_hdn"> <span>9</span> <span>,</span> <span> </span> <span>6</span> <span>2</span> <span>1</span> </d ...

Is there a way in HTML to navigate directly to a specific element on another page, even if it is not currently visible

I have used an anchor to navigate to a specific element on another page from the current page. However, the specific element I want to navigate to is not currently visible because it is controlled by JavaScript to keep the page short. The element is only s ...

The most intricate Three.js model

When it comes to learning Three.js, I've found that dissecting examples is the most effective method. While I can work with textured cubes and extruded spline shapes, modeling a WC pan poses a challenge as there aren't any specific examples avail ...

What causes the array to be void of contents following filtration?

I've encountered an issue while trying to filter some objects within an array - I keep getting an empty result. Here's the code snippet: let guilds = guildsData.filter((el) => { return el.owner == 'true'; }); console.log(guilds ...

I am looking to implement the ajax data variable for use in a submit button. How should

I'm facing an issue where, upon clicking the submit button, I am unable to receive the value yearend. Instead, I am getting an undefined value. How can I ensure that I receive the correct yearend value when I click the submit button? Here is my code: ...

Can different versions of Node be used simultaneously for various Node scripts?

Currently, I am utilizing nvm. Can a specific node version be used for a particular script? For instance... Using node 6 forever start -a -l $MYPATH/forever.log -e $MYPATH/err.log -c "node --max_old_space_size=20" $MYPATH/script_with_node_version_6.js U ...

Error in vis.js network: hierarchical layout caused by node quantity

I'm encountering an unusual issue that I can't seem to resolve by referring to the vis.js documentation. My network has a fixed hierarchy with a specific level defined for each node. I have a total of 51 nodes, and everything looks like this: ...

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

Having trouble with my ajax success function, could use some assistance please

Having issues passing values from an AJAX request to a PHP file. The error function seems to be working, but I can't figure out what's wrong with my code. Here is what I have: <script> function test(){ //alert("hello"); var myD ...

Pausing a running function in React

Exploring Visual Sorting Algorithms In the process of creating a visual sorting algorithms tool for educational purposes, I have developed a function called sortArray() that handles the animation of the sorting process on arrays. The functionality is evid ...

A step-by-step guide on how to insert an image URL into the src attribute using the

The source of my image is -> src/assets/images/doctor1.jpg I would like to use this image here -> src/components/docNotes/docNotes.js In the docNotes.js file, I attempted -> <Avatar className={classes.avtar} alt="Remy Sharp" src ...

Extract information from a JSON string using a foreach loop to handle multiple occurrences of the same data type

I am working with a JSON object that I need to parse in order to retrieve specific data. The structure is as follows: "id": "5019b4b40cd8a056446b8eb4", "checkItemStates": [ { "idCheckItem": "xxxxxxxx", "state": "complete" }, { "idCheckItem ...