Is it possible to modify the location of my CSG object prior to performing subtraction in Threejs with ThreeCSG?

Looking to carve out specific "voids" in platforms using ThreeCSG. The goal is to have these voids positioned at particular locations on the larger platform.

  var geometry = new THREE.CubeGeometry( 500, 10, 500 );
  var hole_geometry = new THREE.CubeGeometry( 50, 11, 50 );

  var material = Physijs.createMaterial( new THREE.MeshLambertMaterial( { color: 0xEEEEEE } ), 0.2, 0.8  );
  var hole_material = Physijs.createMaterial( new THREE.MeshLambertMaterial( { color: 0x000000, side: THREE.DoubleSide } ), 0.2, 0.8  );

  var platform = { platform: null, hole: null };

  // platform
  platform.platform = new Physijs.BoxMesh(geometry, material, 0);
  platform.platform.position.y = -i*300;
  var platformBSP = new ThreeBSP( platform.platform );

  // hole
  platform.hole = new Physijs.BoxMesh(hole_geometry, hole_material, 0);
  platform.hole.position.y = -i*300;
  platform.hole.position.x = Math.floor(Math.random()*(251))*(Math.random() < 0.5 ? -1 : 1);
  platform.hole.position.z = Math.floor(Math.random()*(251))*(Math.random() < 0.5 ? -1 : 1);
  var holeBSP = new ThreeBSP( platform.hole );

  platformBSP = platformBSP.subtract(holeBSP);
  platform.platform = platformBSP.toMesh(material);
  platform.platform.position.y = -i*300;


  scene.add( platform_array[i].platform );
  scene.add( platform_array[i].hole );

Facing an issue where the position of the hole is not retained after converting it from Three.js to ThreeCSG. As a result, every created hole ends up at the center rather than at random positions within the platform.

Struggling to find any resources or documentation on how to adjust the position of the "hole" once it has been converted into a ThreeCSG object.

Answer №1

In the code snippet provided in the ThreeCSG source, a technique is employed to convert geometry into a mesh, translate the mesh, and then create a BSP (Binary Space Partition) from the translated mesh as outlined in the second line below:

var cube_geometry = new THREE.CubeGeometry( 3, 3, 3 );
var cube_mesh = new THREE.Mesh( cube_geometry );
cube_mesh.position.x = -7;
var cube_bsp = new ThreeBSP( cube_mesh );

var sphere_geometry = new THREE.SphereGeometry( 1.8, 32, 32 );
var sphere_mesh = new THREE.Mesh( sphere_geometry );
sphere_mesh.position.x = -7;
var sphere_bsp = new ThreeBSP( sphere_mesh );

var subtract_bsp = cube_bsp.subtract( sphere_bsp );
var result = subtract_bsp.toMesh( new THREE.MeshLambertMaterial({ shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('texture.png') }) );
result.geometry.computeVertexNormals();
scene.add( result );

Answer №2

To ensure your mesh is accurately positioned prior to cutting, consider applying a matrix transformation directly to the geometry.

platform.platform = new Physijs.BoxMesh(geometry, material, 0);
platform.platform.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, -i * 300, 0 ) );

There may be a potential issue preventing THREEBSP from utilizing the position attribute (could Physijs be causing interference? I haven't had experience with it).

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

Issue regarding the slash format in credit card expiration dates

When entering the credit card expiration date, I am currently facing an issue. Every time I input two numbers, I need to manually add a slash (/) after them. However, if I try to delete the third number, it only removes one character. Is there a way to mak ...

Explore the XML format within a JavaScript string

Currently, I am retrieving a string from PHP using AJAX. This string contains data from a database formatted in XML tags. Upon receiving this string in JavaScript, my objective is to display it as an XML document on the web browser to verify its proper fo ...

When the ng-model is updated within a promise's .then() function, the ng-change

I've encountered an issue with ng-change in a select not triggering when I update the ng-model parameter within my promise.then function. Here's my select code: <select ng-model="currentReport" ng-options="rpt.ReportDisp for rpt in availa ...

Retrieving Outdated Information through the Express Framework

Whenever I make a fetch request to a node express server, it sometimes returns old data that was previously fetched from the same endpoint. This issue occurs sporadically but seems to happen more often than not. Even after disabling Cache-Control in the f ...

Implementing real-time time updates using php ajax technology

It's fascinating how websites can update the time dynamically without using ajax requests. I currently have a comment system in place. $('#comment').click(function(){ $.post(url,{ comment : $(this).siblings('textarea.#commen ...

Inhibit the ASP:dropdownlist when the value of another ASP:Dropdownlist is selected

Trying to modify two asp.net dropdownlists using client-side JavaScript is my current challenge. Specifically, these dropdowns are located within a modal that opens with a function. The objective is to disable the second dropdown (dropdown2) whenever the ...

Delaying the search in Jquery until the input is finalized

Is there a way to delay the search trigger until the user finishes typing? I'm utilizing a function created with mark.js () which initiates the search as the user types, resulting in jumping to the first result during the search. However, the issue is ...

Unable to access a text file while executing a javascript file as a systemd service

Running a javascript file using node on a Raspberry Pi at startup automatically through a systemd service has been giving me some trouble. I followed a guide similar to this one to set it up. When I manually run the javascript file by entering the comman ...

Ways to manage a post request in Next.js

Attempting to establish a POST route within my api directory with next.js. After sending the data to the route, I am having difficulty parsing the data in order to properly store it in the database. What would be the most effective approach for managing ...

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Explore the latest documentation for Next.js version v13: https://i.sstatic.net/M0G1W.png Take a look at my file structure: https://i.sstatic.net/nVsUX.png I considered usi ...

Monitoring Website Load Speed using Performance API

After attending a recent talk by Steve Souders, I was fascinated by the discussion of the new performance spec being implemented by modern browsers. During his presentation, he used an example to demonstrate how to measure perceived page load time: var ti ...

AngularJS $scope variable can be initialized only once using an HTTP GET request

I'm facing an issue with fetching data from an API in a separate AngularJS application. There's a button that triggers the retrieval of data from the API. Upon clicking, it executes the $scope.getApiData function, which is connected to $scope.pr ...

Issue with the select element in Material UI v1

I could really use some assistance =) Currently, I'm utilizing Material UI V1 beta to populate data into a DropDown menu. The WS (Web Service) I have implemented seems to be functioning correctly as I can see the first option from my Web Service in t ...

What exactly is the significance of status within Google Chrome?

Today, while using Chrome, I encountered something quite unusual. var foo = ["70036", "70374"] var status = ["70036", "70374"] console.log(status[0]); console.log(foo[0]); One would expect the console to display: 70036 70036 However, the actual output ...

Steps to turn off a Material UI CSS class for an element universally

Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...

What is the maximum duration we can set for the Ajax timeout?

I am facing a situation where an ajax request can take between 5-10 minutes to process on the server side. Instead of continuously polling from JavaScript to check if the request is completed, I am considering making just one ajax call and setting the tim ...

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

There seems to be a problem with the sorting functionality on the table in React JS,

My React table is functioning well with all columns except for the country name column. I double-checked the API and everything seems to be in order, but I'm stuck on how to troubleshoot this issue. const Table = () => { const[country, setCount ...

Tips on managing JavaScript pop-up windows with Selenium and Java

There have been numerous solutions provided on Stack Overflow for handling JavaScript windows, but my situation is quite unique. I am currently working on automating a process for our web-based application. The development team recently implemented a MODA ...

Incorporating Javascript into a <script> tag within PHP - a step-by-step guide

I am trying to integrate the following code into a PHP file: if (contains($current_url, $bad_urls_2)) { echo '<script> $('body :not(script,sup)').contents().filter(function() { return this.nodeType === 3; ...