Creating Isometric Rooms with X and Y Coordinate Coloring

I am working on creating an isometric room and I aim to color it in a specific style. However, the current code I have been using produces a different result than expected. Can anyone help me understand how this code works and potentially correct any mistakes?

for(let iX = 0; iX < 10; iX++) {
    for(let iZ = 0; iZ < 10; iZ++) {
        if(iX % 2 == 0) {
            material = material1;
        } else {
            material = material2;
        }
        
        var box = generateBox(1, 0.1, 1, material);

        box.name = `box-${iX}-${iZ}`;

        box.position.set(iX, box.geometry.parameters.height / 2, iZ);

        room.add(box);
    }
}

Answer №1

The style of the material should be determined by both the iX and iZ variables, not just by the value of iX alone. To achieve this, you can use the following code:

if ((iX + iZ) % 2 === 0) {
  material = material1;
} else {
  material = material2;
}

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

Is it possible to modify the geometry in Three.js to match the texture?

Currently, I am immersed in a Three.js project that involves integrating multiple images into a 3D space. My approach so far has been to directly use these images as textures on planes. However, the challenge lies in the fact that these images vary in heig ...

Express-Postgres encounters an issue with applying array filtering: error message indicates that the operator for comparing integer arrays and text arrays does not exist

I'm facing an issue where the same query that works on the terminal is now giving me an error: operator does not exist: integer[] && text[] It seems that pg.query is having trouble processing the expression path && Array[$1]. You can ...

Node.js is raising an error because it cannot locate the specified module, even though the path

Currently in the process of developing my own npm package, I decided to create a separate project for testing purposes. This package is being built in typescript and consists of a main file along with several additional module files. In the main file, I ha ...

AJAX is refusing to upload the information

I have recently started learning about AJAX. Our assignment for this week involves submitting a form using Ajax. However, I am facing difficulties as the form is not getting submitted. The PHP code works perfectly fine on its own and it needs to be access ...

Tips for concealing a dynamic DOM element using JQuery after it has been generated

My current project involves creating a form that allows users to dynamically add text fields by clicking on an "add option" button. Additionally, they should be able to remove added fields with a "remove option" link that is generated by JQuery along with ...

Implementing a transition to activate upon data loading in a Vue.js component – here's how!

Currently, I am immersed in a project utilizing vue.js and vue-router. Within my Vue application, I have a section dedicated to displaying news fetched from an API that functions as a blog. To load this news data into the component, I am utilizing the rou ...

Using R plotly to show an image when hovering over a location on a map

After successfully implementing the technique of displaying an image on hover in a regular R plotly chart, I encountered issues when trying to apply the same method to a plotly map. Specifically, the approach broke down and failed to display the image. Can ...

Typescript: Mongoose encountered an error when trying to convert value to ObjectId for the specified path "_id"

Whenever I intentionally use postman to request a wrong product ID, the application crashes. Cause The error is not being caught by my error-handler middleware. Route /* retrieves a single product */ router.get("/:id", async (req: Request, res: Respons ...

As we hover over a specific div, a secret div emerges and shifts its position

Looking to create a hidden div that appears and moves when hovering over another div. My current code is functional, but the hidden div does not move as the mouse moves on the div. This is likely due to the hover function being used. How can I address thi ...

Create a global base URL variable within the Axios plugin for Vue

As I work on my Vue.js project, I've successfully implemented a plugin for Axios following the guidelines provided here. This allows Axios to be utilized globally within the project. The key snippets of code in my project are as follows: in src/plugi ...

Using AngularJS to filter through multiple criteria within an ng-repeat loop

I need to filter the messages data to exclude certain messages based on the userid. For example, in the scenario below, only messages from Paul (userid: 11) & Kate (userid:12) are displayed. What I want to achieve is to filter out more than just one useri ...

Tips for implementing validation in the given AngularJS code

What is the correct way to implement validations in AngularJS as shown in the CODE snippet below? I have attempted to apply the validations mentioned in the code but they seem to be malfunctioning. Please help me identify the error in the code related to ...

What could be causing the JavaScript/jquery code in my Functions.php file to only function properly on the initial post that loads on my WordPress website?

Currently, I am in the process of developing a WordPress website where the content is refreshed weekly. This means that all posts, media, and files are removed from the WP environment every week and replaced with new content. One of the key components of ...

Displaying array elements at random in a React application

In the process of creating a compact React application with the assistance of the Potter-API, users can explore specific characters or spells. The app fetches data from the API and displays 6 random items (characters/spells) that lead to detailed views whe ...

Simultaneously activate the 'onClick' and 'onClientClick' events on an ASP button using JavaScript

I have encountered an ASP button while working on existing code that has both onClick and onClientClick events attached to it. My goal is to trigger both events by generating a click event from an external Javascript file. The line of code I am using for ...

Ways to check if a tag has been rendered using Jest and Enzyme

I'm having trouble figuring out how to properly test if an element is rendered or not. Here's the test I wrote: const props = { type: 'test_plan', renewal: '25.06.2019', subscriptionName: 'Test', }; test(&apos ...

issue with duplicating DOM element using function

My situation is unique from the one described in this post. The code mentioned there is not functioning as expected when clicking the clone button. I have even provided a video explanation of how that code works. Unfortunately, I haven't received any ...

Is it possible to connect php code to a class?

On my website, we generate customized itineraries based on selected cities. We transfer the user's selections from one page to the next using cookies. Our goal is to dynamically display PHP content based on the saved cookies from the previous page. Fo ...

Saving an array of key-value pairs in local storage

I'm attempting to save an array in local storage using the following code: var tempval = []; tempval['key'] = 1; localStorage.setItem("Message", JSON.stringify(tempval)); However, when I check local storage, it only sho ...

Is it just me, or does exiting and returning to a photo gallery seem to magically increase the number of pictures you see when you click the Previous/Next photo button? Can anyone explain this

I am in the process of developing a photo gallery application to enhance my understanding of dynamic content. Take a look at the following URL to gain a better insight: You can also check out the code on Codepen for a deeper look. Despite some styling is ...