What is the process for importing a PLY mesh containing triangles and individual vertices into Three.js?

I am trying to showcase a model in Three.js that includes triangles and isolated vertices. The model is encoded in a PLY format. I am using THREE.Mesh to display the triangles and THREE.Points to show the isolated vertices, using the same geometry object for both. However, only the vertices that are part of triangles are being displayed.

I conducted a test where I kept the vertices but removed all the triangles (faces) in the PLY file. Surprisingly, in that scenario, all vertices are displayed...

How can I achieve a display of both triangles and isolated vertices?

I have included a small test PLY file with 4 vertices, 3 of which are part of a triangle. When loaded with the provided code, only the 3 vertices in the triangle are visible.

const meshString = `ply
format ascii 1.0
element vertex 4
property float x
property float y
property float z
element face 1
property list uchar int vertex_indices
element edge 0
property int vertex1
property int vertex2
end_header
-1 1 0.000000 
1 1 0.000000 
1 -1 0.000000 
-1 -1 0.000000 
3 0 1 3
`;
const loader = new THREE.PLYLoader();
geometry = loader.parse( meshString );
const meshPoints = new THREE.Points( geometry, pointsMaterial );
scene.add(meshPoints);

Edit 1

Here is an illustration depicting the desired outcome versus the current result: https://i.sstatic.net/STplb.png

Edit 2

I have created a CodePen demonstrating the issue.

Edit 3

I have identified the root cause of the problem, but I am still eager to find an effective solution. It appears that the PLYLoader generates an index when faces are present, and this index only includes vertices linked to faces. If there are no faces, index=null, resulting in all vertices being displayed. Even using geometry.toNonIndexed does not resolve this, as only vertices associated with faces are retained. One potential fix is manually setting geometry.index=null, which allows the missing vertices to be rendered.

javascriptthree.js

Answer №1

To avoid copying the vertices when creating a clone of the geometry and setting geometry.index=null as suggested in Edit #3, use the following method:

const loader = new THREE.PLYLoader();
const geometry = loader.parse(meshString);

// Display triangles using mesh
mesh = new THREE.Mesh(geometry, Mesh.meshMaterial);
scene.add(mesh);

// Display points, including those outside triangles
const geometry2 = geometry.clone(); // Create a clone of the original geometry
geometry2.index = null; // Exclude indexing
geometry2.attributes.position = geometry.attributes.position; // Use the same vertices as the original mesh
meshPoints = new THREE.Points(geometry2, Mesh.pointsMaterial);
scene.add(meshPoints);

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

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

javascriptangularjsauthenticationnavigation

Guidelines for simultaneously modifying two dropdown select options

Is it possible to have one dropdown automatically change its value based on the selection made in another dropdown? For instance, if 'Value 1' is chosen from 'dropdown 1', can we set 'dropdown 2' to automatically display the ...

javascriptjqueryhtmlformsdrop-down-menu

Using ReactJS and Hooks to update state after the .map() function

Trying to update the state using values from an array. Here is an example: const [state, setState] = useState({}); const test = [1, 2, 3]; test.map((item, i) => { setState({ ...state, [`item-${i}`]: item }); }); The current s ...

javascriptreactjsreact-hooks

JavaScript pop-up that appears across all applications

An ASP.NET page I've developed in IE is responsible for monitoring multiple server jobs that run overnight. Whenever an error occurs on one of these jobs, a popup window opens using javascript's window.open() function. However, employees often ha ...

javascriptasp.netinternet-explorer

Merging two separate observableArray into a single entity in knockout js

I am currently working on merging two distinct arrays into a general array and then connecting it using foreach. My View Model: self.cancelledItem1 = ko.computed(function () { return ko.utils.arrayFilter(self.items(), function (item) { ...

javascriptjqueryasp.net-mvc-4knockout.js

Adjust the positioning of axisLeft labels to the left side

I have incorporated a @nivo/bar chart in my project as shown below: <ResponsiveBar height="400" data={barData} keys={["value"]} indexBy="label" layout="horizontal" axisLeft={{ width ...

javascriptreactjschartsnivo-react

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...

javascripthtmlcss

Issue with ajax form: success function is not functioning as intended

For my form submission, I am utilizing ajaxForm(options) to run some functions before submitting the form. Here is an example of the options that I have configured: var options = { target : '#output1', success : ...

javascriptjqueryajaxajaxform

Using Vue.js - Incorporate filtering functionality within the v-for loop

I've successfully implemented a Vue filter that restricts the length of an array to n elements. It functions perfectly when used like this: {{ array | limitArray(2) }} Now, I'm attempting to utilize it within a v-for loop as follows: <li v- ...

javascriptvue.jsvuejs2vue-componentv-for

When attempting to use jQuery to click on a button that triggers an ajax callback, the functionality does not

I am facing an issue with my Drupal website. I have created a form with a button that has an ajax callback. The callback works perfectly, but now I want to execute a small JavaScript function when the user clicks on the submit button. Instead of creating ...

javascriptjqueryajaxdrupal

Pass the pre-encoded value through Ajax

Is there a way to prevent AJAX from encoding an already encoded value when passing it through data? I'm facing this issue where my value gets further encoded. Any solutions? This is the AJAX code I'm using: $.ajax({ url: form.attr(" ...

javascriptajax

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Does anyone know how to create a dynamic character using css, html, and javascript, and detect collisions with other elements? Any suggestions or guidance would be greatly appreciated. ...

javascriptcsshtmlgraphicsjquery-animate

perform a JSON request in a RESTful manner

Can you explain the concept of making a RESTful JSON request? In the given scenario, when Backbone attempts to read or save a model to the server, it calls upon the function known as Backbone.sync. This function, by default, utilizes (jQuery/Zepto).ajax t ...

javascriptjsonbackbone.js

Using Angularjs to bind an array element within an ng-repeat inside a directive

Having trouble displaying the elements of an array using ng-repeat with a directive. The binding is not working correctly and showing empty values. To view the code, visit http://jsfiddle.net/qrdk9sp5/ Here is the HTML: <div ng-app="app" ng-controlle ...

javascriptarraysangularjsdirective

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...

javascriptphpjquerycsstabs

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

javascriptgoogle-tag-manager

What is the process of embedding a Vue.js application into an already existing webpage using script tags?

My goal is to integrate a Vue.js application into an existing webpage using script tags. Upon running `npm run build` in my Vue application, I end up with 7 compiled files: app.js app.js.map manifest.js manifest.js.map vendor.js vendor.js.map app.css In ...

javascriptwebpackvue.js

Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which als ...

javascripthtmlcsspaypalopencart2.x

Is there a way to transform JSON text into a JSON object?

Similar Question: How do I convert JSON to a JavaScript object? { "data": [ { "name": "JoongBum Lee", "id": "526210623" }, { "name": "\uc774\uc778\uaddc", ...

javascriptjson

Error encountered with the OffsetWidth in the Jq.carousel program

I am encountering an issue that I cannot seem to figure out. Unexpected error: Cannot read property 'offsetWidth' of undefined To view the code in question, click on this link - http://jsfiddle.net/2EFsd/1/ var $carousel = $(' #carouse& ...

javascriptjquerycarousel