Adjusting the `geometry.setDrawRange` property causes synchronization to become interrupted

In my code, I have implemented a render loop to attach a cube to the end of a line called BuffGeometry line. Everything works well when I set the line's geometry.SetDrawRange to (0, drawRange).

line1.geometry.setDrawRange(0, drawCount);
line2.geometry.setDrawRange(0, drawCount);
//blahblah
var positioning = buffGeometry2.getAttribute('position');
if (drawCount%3 == 0){
    cube.position.x = positioning.array[drawCount*3 + 0];
    cube.position.y = positioning.array[drawCount*3 + 1];
    cube.position.z = positioning.array[drawCount*3 + 2];
}

However, I encountered a problem when trying to limit the length of the line with

geometry.SetDrawRange(drawRange-20, drawRange)
. This caused the cube's position to be out of sync with the line's head position. To fix this issue, I made some changes to the setDrawRange lines:

if (drawCount > 20){
    line1.geometry.setDrawRange(drawCount-20, drawCount);
    line2.geometry.setDrawRange(drawCount-20, drawCount);
}
else{
    line1.geometry.setDrawRange(0, drawCount);
    line2.geometry.setDrawRange(0, drawCount);
}

As a result of these changes, the cube now stays on the line's path when the draw limit is reached (after 20 steps), but it struggles to keep up with the line's pace.

Thank you

Answer №1

Recently, I made an interesting discovery about my error. Despite my initial struggle to find clear instructions on using setDrawRange, I stumbled upon a helpful tutorial that clarified things for me. In essence, the correct syntax is:

setDrawRange(<start>, <count>)
not
setrDrawRange(<start>, <finish>)
as I had mistakenly assumed...

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

Experience the enhanced features and optimized performance of Onsen 2.0 compared to the earlier version

Apologies if this question is too simplistic, but I am finding some conflicting information in the documentation about using Onsen with Monaca. I am currently utilizing Monaca cloud and I prefer to work solely with pure JS, without incorporating Angular ...

What is the process for exporting data from MongoDB?

Recently, I created a web application for fun using Handlebars, Express, and Mongoose/MongoDB. This app allows users to sign up, post advertisements for others to view and respond to. All the ads are displayed on the index page, making it a shared experie ...

Navigating to a fresh window using Selenium/Protractor in Javascript

Seeking assistance with accessing a new "pop-up" window that appears after clicking a "login" button. The code I am currently using to capture the window handle seems to be ineffective even though I am able to reach the displayed window. My scenario invol ...

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

I'm currently working on accessing the user's profile picture through Microsoft's Graph API. The code snippet below demonstrates how I am trying to obtain the profile image: export async function fetchProfilePhoto() { const accessToken = a ...

Use of image tag inside the title attribute

After coming across the question on how to add an image tag inside the title attribute of an anchor tag and finding only one answer claiming it's impossible, I stumbled upon a page where it was actually done: I decided to view the source of the page ...

Modify an HTML table and record any modifications as POST requests using Javascript

As a beginner in JavaScript and HTML, I am open to corrections if I am not following the correct practices. Recently, I delved into editing an HTML form table. {%extends 'base.html'%} {%block content%} <html> <body> <h4> Search ...

Tips for determining if an array includes a specific item

I am seeking to limit the keys that are allowed to be pressed. $('.txtComments').keydown(function (event) { var keys = new Array(); keys[0] = "8"; keys[1] = "46"; keys[2] = "37" keys[3] = "39" if(!(....)) //Verify if the keyCode cor ...

Exploring the possibility of utilizing the talks.js library to develop a chat feature within a React application

I'm currently working on integrating the talks.js library to set up a chat feature in my React project. I've followed all the instructions provided at , but unfortunately, it's not functioning as expected. I'm not quite sure what I migh ...

The ajax client is encountering an undefined response, but it is correctly processed when accessed through the

I am in the process of setting up an ajax client with a dummy server for testing purposes. I have successfully resolved the cors issue, but now I am facing a problem where the response from the ajax client is showing as undefined. Interestingly, when I acc ...

Using React and graphql to show information on selected options across components

Currently, I'm facing a challenge in determining my next step. In productList.js, there is a straightforward select dropdown class component that displays all data from Products (id, name, brand,vintage) using graphql(apollo). It successfully sho ...

Exploring AngularJS: Utilizing limitTo and filter

I'm having some trouble with using angular's limitTo and filter together. I want to search for a value in the search box, then apply a limit to the number of results displayed by entering a number in the filter box and clicking apply filter. Howe ...

Tips for updating an element in an array by using another element from a separate array

What is the objective? We have two arrays: orders and NewOrders We need to check for any orders with the same order_id in both arrays. If there is a match, we then compare the order status. If the order from the NewOrders array has a different status, w ...

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

How can one display blog data (stored as a PDF) from a database alongside other different results (stored as

I have successfully displayed a PDF file from my database as a blob using the header("Content-type:application/pdf") method. Now, I am looking to also display some additional string results along with this PDF file. Is it feasible to achieve this while d ...

Modifying the class of multiple images within an array

I am excited to share my first post here and express my gratitude for all the solutions I have found on this platform. I encountered an issue with using .removeClass and .addClass in my recent program. I am loading multiple pictures into an array called F ...

Interacting with wpdb using AngularJS

I just started learning AngularJS and I'm eager to implement it on my WordPress website. My goal is to display a table with data from a database in my WordPress site, but I am encountering difficulties accessing the WordPress functions and variables. ...

Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag

While working on my vue/vuetify project and attempting to implement optional chaining, I consistently run into an error: ./src/App.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??v ...

Incorrect data retrieval from JSON object with JQUERY

I am working on a function that extracts data from a database on the server-side and assigns it as the value of a textbox on the client-side. The function is functioning correctly on the server-side, but on the client-side, when I use console.log to view t ...

Develop a map in JavaScript that uses a parent key to filter data from an object and then stores it in the map

con_data = { "0": { "Actual1920": 2379403, "Budget1920": 10121051.161450788, "CostOwner": "Dr. Ratnavat", "LTRevExp": "Expense-EB", "LedgerBudget": "Salary", "LedgereType": "Salary-Teaching", ...

Incorporating Data from a Dictionary into a Highcharts Series

Utilizing flask allows me to organize all my data in a dictionary for use with highcharts. my_data = { 'dataset1': {'x_values': [1, 2, 3, 4, 5, 6], 'y_values': [7, 8, 9, 10, 11, 12]}, ...