Issue with rendering in Three.js - The final set of points is not displaying

Despite having all the relevant data in the BufferGeometry object, I am facing an issue where the last bunch of points are not being rendered in the THREE.js viewer. This problem arises when using version 85 of the THREE.js library, as some points go missing. However, if I revert back to using version 67, all points display correctly.

In version 67, I utilized THREE.Float32Attribute and THREE.ParticleSystem, resulting in all points loading seamlessly.

On the other hand, in version 85, I switched to using THREE.Float32BufferAttribute and THREE.Points due to the deprecation of older functions. While there are no errors reported, a noticeable absence of points (specifically, a whole patch or area) is observed. Oddly enough, these missing points happen to be the last ones read from the LiDAR file, a discovery I made through LAStools lasview.exe, which loads points in sequential order.

I meticulously debugged the code to ensure correct value passing into the THREE.Float32BufferAttribute constructor and proper assignment to the array. Even while creating the THREE.Points constructor, all seemed well with the values passed. Given that THREE.ParticleSystem is now obsolete, I see no choice but to stick with THREE.Points.


var geometry = new THREE.BufferGeometry();
var data = [an array of data];
geometry.addAttribute('position', new THREE.Float32BufferAttribute((pointCount), 3));
geometry.getAttribute('position').array = new Float32Array(data);
geometry.computeBoundingSphere();

var shaderMaterial = new THREE.ShaderMaterial(...);
var particles = new THREE.Points(geometry, shaderMaterial);
particles.name = geometry.name;

this.scene.add(particles);
this.scene.needsUpdate = true;

No discernible errors were encountered. Works perfectly on version 67 but exhibits missing points on version 85.

The following is the functioning code snippet for version 67:


var geometry = new THREE.BufferGeometry();
var data = [an array of data];
geometry.addAttribute('position', new THREE.Float32Attribute((pointCount), 3)); // Using Float32Attribute instead of Float32BufferAttribute
geometry.getAttribute('position').array = new Float32Array(data);
geometry.computeBoundingSphere();

var shaderMaterial = new THREE.ShaderMaterial(...);
var particles = new THREE.ParticleSystem(geometry, shaderMaterial); // Using ParticleSystem instead of Points
particles.name = geometry.name;

this.scene.add(particles);
this.scene.needsUpdate = true;

I have provided screenshots: The first image demonstrates the issue using version 85 and the aforementioned code. The second image shows the same data successfully loaded in version 67 (disregard any differences in intensity color; focus lies on the missing patch on the right side, representing the final section of data in the BufferGeometry array)

Version 85 - Missing Points

Version 67 - All Points Rendered

Answer №1

Big shoutout to @TheJim01 for helping me solve this issue:

geometry.addAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(classificationGeometry.positions), 3));

This method worked like a charm, eliminating the need to declare/set objects individually.

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 use JQuery to swap out a blank div with the outcome of a load event?

I have a placeholder div nested inside another div. My goal is to swap out the placeholder div with data retrieved from a .load() call when the parent div is clicked on using its onclick function... Here's an example: function switchContent(projec ...

Sending parameters from one Node.js function to another in separate JavaScript files

I am currently working on passing function responses between two Node.js scripts. Here is my approach. Index.js var express = require('express'); require('./meter'); var app = express(); app.get('/',function(req,res){ ...

Angular - The JSON passed to the fromJSON method was not valid, as an unexpected token was found at the first position

I'm encountering some challenges while trying to execute a post request to my Spring Rest service hosted on localhost. Although the request and the service are functioning properly, the issue I am facing is that I continuously receive an error indica ...

Utilizing either Three.js requestAnimationFrame or TweenMax tick handler

Exploring the capabilities of Greensock's TweenMax JS and Three.js has led me to a dilemma regarding which library should handle the requestAnimationFrame (rAF) function. When utilizing the rAF provided by Three.js, the animation runs smoothly at rou ...

obtaining user information from API using the x-api-key

As a beginner JavaScript programmer, I'm attempting to fetch user information. Is there a simple way to search for a specific person like Laurel Gates with the USERID: 987654321? English is not my native language, so I apologize for any mistakes. Here ...

What is the best way to connect a router link and dialog box in a dropdown menu using Vue.js?

https://i.sstatic.net/JahMG.pngI am working on implementing a dropdown menu that includes a router link to another component and a dialog component for a dialog box. Here is the code snippet for reference: <td align="center"> <v-btn ...

Removing an element from an array within each subdocument using Mongoose

In my User Model, I have a cart that stores products (only the id). When I need to remove a product from the store, it should also be removed from all users' carts. I attempted this code: User.update({ $pull: {'cart.items': {productId: prod ...

Instructions for exporting specific rows on Datatables: I have incorporated the use of checkboxes for row selection in Datatables

In my server-side code, I am attempting to export selected rows. However, after exporting, all the records are being exported instead of just the selected ones. To enable selection, checkboxes are being used. while( $row=mysqli_fetch ...

How can I transform this in JavaScript so that it returns a Promise?

Currently, I am trying to implement code that I found in a SaaS's example. The goal is to retrieve the correct URL for a specific action. The sample code provided by the SaaS looks like this, but I would like to modify it so that it returns a Promise ...

Sometimes the AngularJS scope is refreshed only intermittently

I am encountering an issue with a list of cards retrieved from an API and displayed in a table using ng-repeat. The problem arises when I attempt to delete a card - sometimes it remains in the view, while other times it disappears as expected after confirm ...

Javascript - Displaying data retrieved from an external API with JSON

Seeking advice on how to effectively attach JSON values obtained from xhr.response to HTML labels. Any suggestions are appreciated. Thank you. On a different note, does anyone have recommendations for websites that provide concise explanations of basic JS ...

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

Encounter a "syntax error Cannot GET /xyz" message using jQuery AJAX

When using $.ajax to request data from a node.js server, I encountered an error while debugging on the client side in Firefox. The console displayed: Syntax error Cannot GET /xyz, where /xyz represents the route for my server. Despite this error, the page ...

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

Using a PHP variable within an AJAX modal window: A step-by-step guide

The main page (main.php) is currently holding a variable called $var = "hello". A modal window (modal.php) is being loaded through AJAX utilizing the following script: var modal_xhr = $.ajax({ 'type' : 'GET', ...

Incorporating jQuery within a React project

Seeking help with integrating a template containing jQuery code into my React app. Using the function $('#steps_user').modalSteps() to reference the jQuery, but encountering issues despite installing jQuery via npm install jquery. The error messa ...

Dynamic and static slugs in Next.js routing: how to navigate efficiently

I am facing a scenario where the URL contains a dynamic slug at its base to fetch data. However, I now require a static slug after the dynamic one to indicate a different page while still being able to access the base dynamic slug for information. For Ins ...

``It seems like there was an error with WebComponents and NextJS - the hydration failed due to a mismatch between the initial UI and what was rendered on

I'm running into an issue with the following error message: Error: The initial UI doesn't match what was rendered on the server, leading to hydration failure. This problem occurs when I have a NextJS webpage that includes StencilJS web compone ...

How does the HTML file in the build directory connect to the JavaScript file in the source directory when setting up a create-react-app

After initializing our react app by running the command create-react-app, a new app directory is created with sub-directories included. When we use the command npm start to run the app, it deploys the index.html file located in the public directory withi ...

Transform every key and value into an array

How can I separate each key and value into individual arrays? Here is the current data: var inputArray = { "3/10/2017": 52, "3/11/2017": 58, "3/12/2017": 70, "3/13/2017": 76 } The desired output should be: var outputArray = [ ["3/10/2017", 52 ...