The mesh takes on a more defined geometric shape once it has been processed using ThreeCSG

When I use ThreeCSG to subtract one mesh from another, I encounter a problem. The main mesh is a ring and the mesh to subtract is a diamond. Initially, the scene looks fine: Mesh fine. However, after subtracting the meshes, the ring become angular: Mesh Broken. I apply the same material/shading as before. Below is the code snippet I am using:

var ring_bsp = new ThreeBSP(ring);
var stone_bsp = new ThreeBSP(stone);
var substract_bsp = ring_bsp.subtract( stone_bsp );
var result = substract_bsp.toMesh( ringMaterial );

result.geometry.computeVertexNormals();

result.material.needsUpdate = true;
result.geometry.buffersNeedUpdate = true;
result.geometry.uvsNeedUpdate = true;

result.scale.x = result.scale.y = result.scale.z = 19;

scene.remove(ring);
scene.add(result);

Update one: Removing "result.geometry.computeVertexNormals();" makes the result look even worse: link.

Update two: I have created a jsfiddle with a minimal example

Update three: Further investigation into the issue and Wilts's latest update, I noticed that after using ThreeBSP the vertices are messed up. This issue is visible in this fiddle.

Update four: The problem appears to be related to the "fromGeometry / toGeometry" functions, as I get the same broken mesh even without performing any subtraction at all.

Answer №1

It seems like there may be an issue with losing vertex normals during the translation process from geometry to CSG and back to Three.js. It would be beneficial to review the source code to identify where this problem arises.

UPDATE:

After examining the code in ThreeCSG.js, a bug has been found on line 48. The correct code should be:

vertex = new ThreeBSP.Vertex( vertex.x, vertex.y, vertex.z, face.vertexNormals[1], uvs );

There seems to be an error with the index for the vertex normals, as it should be 1 instead of 2. This bug may be causing the incorrect export results.

UPDATE 2:

Prior to converting to CSG, try updating the vertex normals of the geometry with the following code:

var geometry = ring.geometry;
geometry.computeFaceNormals();
geometry.computeVertexNormals();

Note: Ensure to call computeNormals() first for accurate results.

UPDATE 3:

During the conversion of faces from Three.js geometries to CSG geometries, the

ThreeBSP.Polygon.prototype.classifySide
method determines the positioning of vertices in relation to each face. Adjusting the EPSILON value in the ThreeBSP library can help control the precision of this process.

By setting EPSILON to 10, triangles will not be considered coplanar and the conversion results will be correct. To implement this, modify line 5 of your ThreeBSP library to:

EPSILON = 10,

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

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

The IE browser consistently retrieves outdated data from its cache

I always encounter the issue of IE browser loading old data from the browser history. To ensure that I am getting the latest data, I consistently need to clear the browser history. Is there a way to consistently load new data without having to manually cl ...

The effectiveness of recursion in asynchronous function calls within AngularJS

My task involves creating a JSON output in tree structure from recursive async calls. The code I have developed for this purpose is detailed below: $scope.processTree = function (mData, callback) { _processTree.getWebCollection( ...

Jquery unresponsive in AJAX form output presentation

I recently delved into the world of jquery and AJAX, and while I grasp most concepts, I'm struggling with a small code snippet. On my webpage, there is a summary of articles. Clicking on an article name triggers a popup window with detailed informati ...

Having difficulty managing asynchronous functions with the useState hook in React

import React from "react"; import { UserContext } from "./../contexts"; import { removeStoredAuthData, storedAuthIsValid, storeNewAuthData, } from "./../utils/auth"; import { getUserInfos } from "./../api/userAuthen ...

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

I am currently working on implementing a strategic design pattern. Here is a simple if-else ladder that I have: if(dataKeyinresponse === 'year') { bsd = new Date(moment(new Date(item['key'])).startOf('year&apos ...

Showing only the objects that are marked as true in the component (React)

I have implemented two key React components. One of them is VideoGameList.js, it serves as an export of an array containing multiple objects. const VideoGameList = [ { id: 1, title: "Fire Emblem Engage", src: vg01, releaseDate: ...

Creating a semi-circle donut chart with Highcharts using the Highcharts-ng library

I have been working on integrating a Highcharts Semi-circle donut chart into my angular application using the Highcharts-ng directive. However, I seem to be facing an issue where the plotOptions section is being skipped entirely, leading to a full circle p ...

Submitting form data via Ajax without refreshing the page

I am trying to submit my form using Ajax without refreshing the page. However, it seems that the $_POST values are not being picked up. I don't receive any errors, but I suspect that my form is not submitting correctly. HTML Form <form action="" ...

What advantages does event delegation in JavaScript offer compared to using jQuery's event handling?

Vanilla JavaScript: parentNode.addEventListener("click", function(event) { if (event.target === childNode) { code here } }); versus jQuery: $(parentNode).on("click", childNode, function() {}); ...

Learn how to automatically set the checked state of a radio button by toggling another radio button

I have two sets of radio buttons, each with four options. The first set has no default selection (unchecked) using jQuery, while the second set has the first option checked by default. What I'm looking to achieve is that when a radio button in the f ...

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control&ap ...

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

Plane is constantly cloaked in darkness

I'm having trouble adding a texture to my plane that repeats both horizontally and vertically. Every time I try to apply the texture, it shows up as black. I've attempted to add some lights to the scene, but the issue persists without any errors. ...

Switching from react-three-fiber to @react-three/fiber. Having issues with updating object in primitive

After updating my dependencies in an older project from react-three-fiber and drei to @react-three/fiber and drei, I noticed a significant improvement in overall performance. Everything seems to be working as expected, except for the issue with changing ob ...

What is the process for defining custom properties for RequestHandler in Express.js middleware functions?

In my express application, I have implemented an error handling middleware that handles errors as follows: export const errorMiddleware = (app: Application): void => { // If the route is not correct app.use(((req, res, next): void => { const ...

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

Prevent encountering the error message "Cannot read property of undefined" while mapping data

When I retrieve data from the Google Books API, I need to transform it into a more manageable array for further processing. To achieve this, I am using the following code snippet: data.items.map(function(book) { return { googleId : book.id, image : book ...

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

The normal rendering in a THREE.Points Geometry is not functioning properly in three.js

Recently delving into the world of threejs, I find myself faced with a project that demands rendering a point cloud using three.js through the Qt5 Canvas3D. Following the examples on threejs.org, I opt for a BufferGeometry where I set the attributes (posit ...