Creating an aperture in a form using a different shape in THREE.js

Currently, I am utilizing the D3-threeD2.js library to convert SVG files into THREE.Shape(s) that can be extruded with three.js. The process works smoothly, however, when it comes to incorporating holes, I encounter an issue.

Imagine a shape resembling a donut: a circular disc with a hole in the center. Using the library generates one THREE.Shape representing the disc and another THREE.Shape representing the hole.

I understand that I can create a hole in the disc if I have a THREE.Path, but unfortunately, I only have a THREE.Shape.

So my question is - Is there a method to obtain a THREE.Path from a THREE.Shape? Alternatively, is there a way to punch a hole in a THREE.Shape using another THREE.Shape?

javascriptthree.js

Answer №1

Posting again because I've come to realize that the solution to this question is so simple yet worth emphasizing separately.

THREE.Shape extends THREE.Path, allowing you to easily create a hole in another shape by adding it as a hole directly.

I conducted tests in two different ways. Firstly, with shapes directly:

var shape = new THREE.Shape();
//...define your shape

var hole = new THREE.Shape();
//...define your hole

shape.holes.push( hole );
shape.extrude( extrusionSettings );

Secondly, if you convert a path into shapes using the toShapes method, it also works:

var path = new THREE.Path();
//...define your path
var shape = path.toShapes()[0];

var hole = new THREE.Shape();
//...define your hole
var holes = hole.toShapes();

shape.holes = holes;
shape.extrude( extrusionSettings );

Check out this demonstration on jsfiddle here which confirms that both solutions are effective...

// JavaScript code for rendering and punching holes in shapes using Three.js framework...
// Code to set up scene, camera, lighting, materials, geometries, etc.
// Animates and renders the scene.


// CSS styling for the body element of the page...


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

Answer №2

If you're looking to perform boolean operations with Three.js meshes, check out the ThreeCSG library on GitHub. It may be just what you need.

While the library itself is a bit outdated, there are several forks available that have been updated to work with the latest versions of Three.js.

UPDATE:

You can try converting your shape into a path using the points array like this:

var shape = ... your shape ...

var points = shape.extractAllPoints();

var path = new THREE.Path( points );

I haven't tested it myself, but it should do the trick.

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

Utilize Jasmine's AJAX spy to intercept and inspect the error request

I am encountering an issue while trying to monitor the ajax error request and receiving the following error message. Can someone assist me with this? TypeError: e.error is not a function Code snippet for JS testing : function postSettings() { $ ...

javascriptjqueryajaxunit-testingjasmine

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

javascriptjqueryhtmlcssvisual-composer

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

javascripthtmldom

Ensure the function has completed setting state before proceeding to the next function

async componentDidMount() { this.loadSelectors(); this.useSelectors(); }; loadSelectors = () => { this.setState({"Selector": "Test"}); } useSelectors = () => { console.log(this.state.Selector); } Is there a way to ensure that loadS ...

javascriptreactjs

Does shouldComponentUpdate returning `true` have the same effect as not having shouldComponentUpdate at all?

Within my React Native component, I have included a blank shouldComponentUpdate shouldComponentUpdate(nextProps, nextState) { } I am aware, from reading this answer, that an empty shouldComponentUpdate function helps in eliminating unnecessary re ...

javascriptreactjsreact-nativereact-lifecycle

The $.getJSON onComplete function does not pause for the result to be returned

When working with JSON data and calling the loadThumbs(json) event, an error message stating that json is undefined may occur. Upon printing the JSON object to the console, it appears empty. However, if the JSON object is manually printed, it displays co ...

javascriptjqueryajaxjson

Troubleshooting issue with C# Ajax success response not triggering alert

I am facing an issue where the alert box for success does not show even though the code successfully inserts contact details using ajax and C#. Strangely, when I debug through the JavaScript debugger in Chrome, the alert pops up as expected. Here is the co ...

javascriptc#jqueryajax

Choose a specific 24-hour range with the Date Interval Selector

I am currently utilizing the Date Range Picker plugin for bootstrap from the website http://www.daterangepicker.com/#examples, and I have a requirement to set the maximum date time range to be within 24 hours. Below is an example demonstrating how I can s ...

javascriptjquerybootstrap-daterangepicker

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

I'm attempting to create a setup that cycles through different images <div id="img_box" class="shadow" onload="imgCycle(1)";> <img id="1" class='opaque imgbox selected' src="media/img ...

javascriptcss

Switching from an AJAX GET request to a POST request involves updating the

I have been trying to figure out how to convert my AJAX GET query to POST by reading forums and searching on Google, but I am still confused. If someone could assist me with this, it would be greatly appreciated. Thank you! Here is the code snippet I am w ...

javascriptajax

Dygraphs: Utilizing two y-axes in a single series

I'm interested in plotting a single series with two synchronized y-axes that display different units, such as °F and °C temperatures. I want the data to be readable from both axes, but only one set of points should be plotted. Here are some approac ...

javascriptdygraphs

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

React's `setState` function seems to be failing to update my rendered catalog

Managing a shopping catalog where checkboxes determine the rendered products. The list of filters serves as both the menu options and state variables. The actual products in the products list are displayed based on the selected categories. const filters ...

javascriptreactjsnext.js

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

The JavaScript file fails to load when it is invoked within the <script> tag in HTML

I'm relatively new to this and I'm grappling with why my script isn't loading from the HTML. This is my primary hurdle at the moment. Next, I'm looking to obtain a list of the available COM ports and send data to a port that is ready. ...

javascriptnode.jsscript-tagnode-serialport

Maintain form activity post submission using jQuery's addClass and removeClass methods

There is a button on my website that, when clicked, reveals a form. The code I am using for this functionality is: $('#theform').addClass('hidden') $('#theform').removeClass('hidden'); <div id="theform" c ...

javascriptjqueryhtmlforms

How can I load a URL without causing a page refresh?

While searching around, I stumbled upon this HTML 5 code snippet: window.history.pushState("object or string", "Title", "/new-url"); I started thinking: how can this be implemented? Is there a way to utilize this code to change the URL to without needin ...

javascriptajaxhtml

Guide to linking two variables in Vue.js

I'm working on a project that combines Laravel with Vue. Right now, I'm passing data from the controller to the view in two variables - users and user_data. How can I link these two variables together and display them using v-for? These two tabl ...

javascriptphplaravelvue.js

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

javascriptjqueryhtmlcssajax

How can server-side JavaScript effectively guard against SQL injection attacks?

Interested in finding the most effective methods to prevent SQL injection. Imagine this scenario: the client side (index.html) has a form that sends an array of string values to your server-side page via $.ajax var data_to_be_submitted = { ...

javascriptsqlnode.jscode-injectionhana