Expecting a volumetric result can be deceiving when dealing with objects that have three flat

The problem at hand:

When subtracting a cube from a sphere, an interesting result occurs where the z axis maintains its volume while the y and x axes create flat disks. This peculiar outcome is puzzling to me as I utilize the typical subtraction method with threeCSG.

Code snippet:

  var geometry = new THREE.CubeGeometry(100, 100, 100);
  var material = new THREE.MeshLambertMaterial({color: 0xff0000, side: THREE.DoubleSide, transparent:true, opacity: .5});
  var cutter = new THREE.Mesh(geometry, material);

  var geometry2 = new THREE.SphereGeometry(60,32, 32);
  var material2 = new THREE.MeshLambertMaterial({color: 0x00ff00, side: THREE.DoubleSide, transparent:true, opacity: .5});
  var massing = new THREE.Mesh(geometry2, material2);

  var cutter_bsp = new ThreeBSP(cutter);
  var massing_bsp = new ThreeBSP(massing);

  var new_bsp = massing_bsp.subtract(cutter_bsp);

  var result = new_bsp.toMesh(material2);
  result.geometry.computeVertexNormals();
  result.position.y = 200;

Although using version 103, the issue persists across versions, even when testing on v77.

Question raised: Why do the resulting sides appear flat? Is there a step needed to modify the geometry before performing the subtraction operation?

View the output above the box and sphere here.

Answer №1

After @manthrax shared his code as an answer, it was later deleted but can still be accessed here: https://github.com/manthrax/THREE-CSGMesh

I have made a fork of the code at https://github.com/radio412/THREE-CSGMesh/ where I removed the export token.

Remember to call updateMatrix() on meshes before performing any operations if transformations have been applied.

The provided code functions properly, but it's unclear why the previous ThreeCSG code wasn't working as expected. It would be helpful to have some insights on this matter.

https://i.sstatic.net/qiVfM.jpg

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

Using Next-Image Relative Paths can lead to 404 errors when being indexed by web crawlers

I have implemented next-image in my project, and all the images are hosted on Cloudinary. The images display correctly, but when I run a website analysis using tools like Screaming Frog, I receive numerous 404 errors. This is because the tools are looking ...

Discover the power of positioning data labels in c3js!

Is there a way to adjust the position of labels above the data in a c3 bar chart? The official documentation explains how to modify the positions of labels on the x and y measurement axes by manipulating integers for y and x, but I couldn't find any i ...

"Header background image gradually fades out and disappears as you scroll, revealing a bottom gradient effect in a React application

When I scroll, my header image fades away. I used JavaScript in my React app to achieve this effect: useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ ...

Unlocking Google contact pictures using Google contacts API - A step-by-step guide

Exploring the Google contacts API with Node.js I've successfully retrieved all the contacts via the Google feed API, but without images https://www.google.com/m8/feeds/photos/media/faizy04%40gmail.com/ya29.ZAFTNcQ6sEue40gFqH5h8h91k8LO8Bwvf50NUgQKKms ...

Stop users from repeating an action

We are encountering challenges with users repeating a specific action, even though we have measures in place to prevent it. Here is an overview of our current approach: Client side: The button becomes disabled after one click. Server side: We use a key h ...

How can I send identical posts to multiple servers and link specific data to each post?

I am attempting to send a post request to multiple servers using jQuery, potentially facing issues with CORS. I have an array containing the jQuery posts and I register the same callback function for each individual one like this: var requestUrls = getReq ...

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...

Enclosing values in JavaScript literals

I apologize for the inconvenience. I am unsure why it is not functioning properly. If I input <button type="button" onclick="document.getElementById("demo").innerHTML = Date()">click</button> the above code does not work. However, if I u ...

Transform ajax functionality into jquery

I need help converting an AJAX function to a jQuery function, but I'm not sure how to do it. function convertToJquery() { // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Set up variables needed to send to PHP file var ur ...

"When attempting to pass a string into the res.send() method in Node.js, undefined

As a new Node.js user, I'm attempting to send data back to the browser by utilizing a function called load_blocks() from an external file that I created, and then calling it with res.send(). I currently have two basic files in my setup: The first on ...

Node application experiencing issues retrieving SVG files during production

When testing my application locally, the svg files display correctly with the code below (Angular.js variables are used within curly brackets): <img ng-src="img/servant_{{servant.personality}}.svg" draggable="false"> However, once deployed on Herok ...

Tips for interpreting information from a JSON array that has been stringified, looping through the data, and utilizing it effectively

I'm currently exploring Node JS packages and I need some guidance. Here is an example of the JSON data that I have: [{ "name":"SpiderMan", "description":"Superhero", "head_id":"29", "domain_name":"spiderman.com" }] I am trying to figure out how to ...

Having trouble getting the libphonenumber npm package up and running, encountering an error stating that fs.readFileSync is not functioning properly

I am currently working on incorporating the googlei18n libphonenumber library for validating phone numbers. I have installed the npm package using npm i libphonenumber. However, when I try to use it like this: var libphonenumber = require('libphonenu ...

Displaying Stats.js inside a different canvas using ThreeJS

Just starting out with Three.js and wanted to test displaying the Stats.js in a small scenario. Check it out here Decided not to use modules for now, but followed similar code structure as in the examples: var stats = new Stats(); var renderer = ...

Tips for accessing every "results" (parameters) from an API

Here is the response I received after making an API call in my attempt to retrieve each "bloc" result using a .forEach. const app = express(); const axios = require('axios') jobList = []; app.get('/getAPIResponse', function(req, res) ...

Transform from a class-based component to a function-based component

Currently experimenting with AutoComplete and AutoFill features in React. My goal is to transition the code into using React hooks, as I have primarily used hooks throughout my project. I've made some progress in converting it to a hook-based struct ...

Retrieving the URL of an image from a webpage's photo gallery utilizing the Facebook Graph API with the help of Javascript

After trying out multiple tutorials, it appears that the latest version of the Graph API has caused some issues with my code. Here is the snippet I am working with: function fetchAlbumImages(){ FB.api( '/760126260690750/photos&ap ...

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

A guide on utilizing URL parameters in Express.js to deliver images as static files

Looking to dynamically serve images from an "images" directory in my project based on user input, how can I achieve this? For instance, https://localhost:3000/images?fileName=burger This URL should display the corresponding image in the browser. If any ...

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery

I need assistance with scrolling the #container div inside the .bloc_1_medias div. The height of #container is greater than that of .bloc_1_medias. My goal is to implement a function where clicking on the "next" and "previous" text will scroll the #contai ...