Disoriented InstancedMeshes causing confusion in THREE JS

Currently, I am experimenting with terrain generation code to generate water at a specific Y level and stone at another. This is just a preliminary model for my upcoming project on Minecraft terrain generation. However, I've encountered a problem where 2 meshes are not being placed as expected. Could it be that I'm overlooking something?

Below is the code snippet:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="module">
      // JavaScript code goes here
    </script>
  </body>
</html>

I have been tinkering with the FOR loop in various ways, but adjusting the values doesn't seem to have any effect. It's puzzling for me as a newcomer to THREE JS and Javascript in general.

Answer №1

Make a modification here:

    if (i < (range / 2)) {
      console.log("water inserted")
      waterDummy.position.x = i + 0.5;
      waterDummy.position.y = 1;
      waterDummy.position.z = j + 0.5;
      waterDummy.updateMatrix();
      meshes[1].setMatrixAt(i + j * range, waterDummy.matrix); 
    } else {
      console.log("stone inserted")
      stoneDummy.position.x = i + 0.5;
      stoneDummy.position.y = 2;
      stoneDummy.position.z = j + 0.5;
      stoneDummy.updateMatrix();
      meshes[0].setMatrixAt(i + j * range, stoneDummy.matrix); 
    }

Remember to call .updateMatrix() before .setMatrixAt().

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

What is the best way to integrate Angular 5 with various sources of JavaScript code?

I am fairly new to angular. I am looking to merge an external angular script file and on-page javascript code with angular 5. I understand that angular does not typically allow for the inclusion of javascript code in html components, but I believe there m ...

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Why when I click the register button, it redirects me to the register_db.php page instead of sending the data to the database and keeping me on the same register.php page? I want the data to be sent to the database without changing the webpage. register.p ...

The correct assertion of types is not carried out during the initialization of generics through a constructor

I am encountering a minor issue with TypeScript, and I am uncertain whether it is due to a typo on my part or if TypeScript is unable to correctly infer the types. Let me provide all the necessary code to replicate the problem: interface IRawFoo { type: s ...

PHP reCAPTCHA integration with AJAX functionality

I have been attempting to integrate a reCAPTCHA into my PHP contact form using AJAX. The goal is to present the user with the reCAPTCHA challenge and allow them to input it. If the input is incorrect, an error message should be displayed without refreshing ...

Working with Vue.js: Utilizing computed properties to iterate through a JSON data structure and generate a new

This is a computed property in Vue.js: shopCart() { var scart = [], group, node; scart.push({ payMethod: 0, transactionReference: "", RoomNumber: 0, addressId: 0, deliveryMinutes ...

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

Navigating through a JSON object created from a Python dictionary in JavaScript

When working on a django app, I have encountered an issue with returning JSON data on a jQuery ajax call: { "is_owner": "T", "author": "me", "overall": "the surfing lifestyle", "score": "1", "meanings": { "0": "something", ...

Encountering a 404 Error on all routes except the home page when working with the Express Application Generator

While working on developing a day planner, I encountered an issue with the routes. I am consistently receiving a 404 error for any route other than the main Home page route (index or "/"). Below is the content of the app.js file: var express = require(&ap ...

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

React Apollo Error - When using refetchQueries, data does not re-render in one component but does so in another. Surprisingly, it works when the refetchQueries is in the same

Within my application, there is a Main Component that displays a list of todos. Additionally, the Sidebar Component showcases various products as illustrated below ...

handling component interaction with react-redux store

Currently, I am in the process of developing my first significant project using react-redux. While trying to establish state mapping between components in react-redux, I seem to have missed a crucial step. Almost everything is functioning smoothly except ...

The data displayed in the <span> element isn't reflecting the response from the loaded page, despite being visible in Firebug

I have encountered a problem while trying to load a signup.php page into a div on my main page. All the elements (forms, JavaScript, etc.) function correctly in the loaded page, except for one issue - I cannot get the response from the PHP script to displa ...

Leveraging Expressjs to act as a proxy for handling cross-origin requests made via AJAX

I'm working on a website that relies entirely on external APIs, without any server-side logic. All data will be retrieved from an external API. The backend server is mainly used for asset management and routing. We've decided to use nodejs with e ...

Working with conditional statements in ReactJS and Javascript

As I navigate the circle object using arrow keys, I am facing a challenge in limiting its movement within the height and width of the svg area. Despite my efforts to use conditional statements, the ball tends to get trapped at the edges and fails to contin ...

"Encountering a problem with posting API requests using Express

I've encountered a problem where I keep receiving a 404 error when trying to post to a specific route. Here's the code snippet: app.js (code snippet for app.js) .... module.exports = app; api.js (code snippet for api.js) .... module.export ...

Troubleshooting issues when integrating three.js GLTFLoader() with TypeScript due to conflicts with zimjs

Successfully loading a model using three.js GLTFLoader() with TypeScript in a nuxt.js application: this.mGLTFLoader = new (<any>THREE).GLTFLoader(); this.mGLTFLoader.load(pPath, (gltf) => this.onLoad(gltf), (xhr) => this.onProgress(xhr), (e) = ...

The list retrieved via ajax appears to be void of any elements, despite the array size being accurately reflected

I am attempting to pass a List from the controller to an ajax function in order to display images in a modal carousel. The process begins when I click on an image, which triggers the ajax function to send a value. This value is then used to call a C# metho ...

Having difficulties with JavaScript's if statements

I'm facing an issue with my JavaScript code that is meant to modify the value of a price variable and then display the updated price. The problem arises when I have multiple select options, as the price only reflects the ID of the last statement. Here ...

No results found when attempting to intersect mouse click raycast on point cloud in Three JS (empty array returned)

I've been working on rendering a point cloud and attempting to select a single point, but unfortunately, the method raycaster.intersectObjects(scene.children, true) is returning an empty array. I've tried various methods to calculate the pointer. ...

Accessing the path to an imported file in Node.js

Currently, I am working on a parser and encountering imports such as ../modules/greeting.js. Additionally, I have an absolute path to the file from where I performed the import: C:\Desktop\Folder\src\scripts\main.js. I am seeking ...