How can I utilize the three.js subdivision modifier while keeping the original outer geometry intact?

I am experimenting with ways to increase the detail of three.js geometries by subdividing their faces into smaller faces. This process would essentially enhance the "resolution" of the geometry. While there is a helpful subdivision modifier available in the examples of three.js, it tends to distort the original shape of the geometry. My goal is to maintain the integrity of the original shape.

Check out the Subdivision Modifier Example

Comparison of current subdivision modifier behavior:

https://i.sstatic.net/YACT9.png

Desired behavior visualization:

https://i.sstatic.net/fTdo7.png

This is how the subdivision modifier is currently applied:

let originalGeometry = new THREE.BoxGeometry(1, 1, 1);
let subdivisionModifier = new THREE.SubdivisionModifier(3);
let subdividedGeometry = originalGeometry.clone();
subdivisionModifier.modify(subdividedGeometry);

I tried exploring the source code of the subdivision modifier, but I struggled to figure out how to adjust it for the desired outcome.

Note: The subdivision should be applicable to any type of geometry. Although my example suggests that modifying a three.js PlaneGeometry with increased segments could work, I need this technique to be compatible with various geometries.

javascriptthree.jsgeometry

Answer №1

After following the advice from TheJim01's comments, I delved into the original source and adjusted the vertex weight, edge weight, and beta values to maintain the initial shape without any averaging. All the emphasis is now placed on the source shape.

I identified three key sections that needed modification and decided to create an optional parameter called retainShape in the constructor, which defaults to false.

I have uploaded a gist containing the edited code for SubdivisionGeometry.js.

Check out the revised SubdivisionGeometry.js Gist here

Below is a demonstration of a cube being subdivided with the option disabled and enabled.

Left: 

new THREE.SubdivisionModifier(2, false);

Right: 

new THREE.SubdivisionModifier(2, true);

https://i.sstatic.net/5s1F8.png

If you encounter any issues or have any queries, feel free to reach out!

Answer №2

When working with the latest version of three.js, it is worth noting that PlaneGeometry offers optional parameters to specify the number of segments for both width and height, with default values set at 1. In a recent experiment, I decided to increase both widthSegments and heightSegments to 128. Surprisingly, this adjustment yielded results similar to using SubdivisionModifier. Unlike SubdivisionModifier, tweaking the segments did not distort the shape but rather enhanced its appearance in my case.

var widthSegments = 128;
var heightSegments = 128;
var geometry = new THREE.PlaneGeometry(10, 10, widthSegments, heightSegments);
//    var geometry = new THREE.PlaneGeoemtry(10,10); // segments default to 1
//    var modifier = new THREE.SubdivisionModifier( 7 );
//    geometry = modifier.modify(geometry);

Check out the official documentation here for more details on PlaneGeometry.

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

Getting Started with NodeJS Child Process for Electrons

My current challenge involves integrating a Gulp setup with debugging electron-quick-start. I am attempting to close and reopen Electron when changes are made to my source files using child_process.spawn. Launching the application seems to work fine, but w ...

javascriptnode.jselectronchild-process

Separating information and values in an ajax post request would allow for a clearer and

My current task involves using AJAX to post data and requesting the script to display that data. I have three files: an HTML file that performs an AJAX request to the PHP script passwrapper.php, which then includes another script to show all the data in JS ...

javascriptphpjqueryajax

Tips for receiving a success notification post form submission on CodeIgniter

I'm currently working on a form using CodeIgniter. Below is the code I have so far: <?php echo form_open_multipart(''); ?> <div class="input-group"> <input maxlength="30" type="text" name="name" placeholder="Name" class ...

javascriptphpajaxformscodeigniter

Searching for documents in MongoDB using minimum as a condition in the query

My user base is expansive, each facing a unique set of problems at different times. I am currently searching for users or documents that share a specific problem type (referred to as "top":1) but only among those, I am interested in isolating the entry wit ...

javascriptreactjsdatabasemongodb

What significance does it hold for Mocha's `before()` if the function passed requires parameters or not?

In one part of my code, I have a describe block with before(a) inside. The function a originally looks like this: function a() { return chai.request(app) ... .then(res => { res.blah.should.blah; return Promise.resolve(); }); ...

javascriptnode.jspromisemocha.jschai

Having trouble getting three.js to display a sphere on the screen?

I am new to using THREE.js and I'm having trouble rendering a sphere in the center of my canvas. Can anyone help troubleshoot my code? Here is what I have: <canvas id='canvas' width='960' height='720'></canvas ...

javascriptthree.js

Searching Categories with jQuery: Explore Remote Results and Cache System

Seeking to enhance user experience on my website, I have decided to implement the JQuery Category Autocomplete plugin. This will enable users to search through categorized results stored in a separate file at "/search_basic.php" (details of the file's ...

javascriptphpjqueryhtmlcss

Having trouble with ReactJS and Javascript? Encountering the error message "Error: Objects are not valid as a React child" when attempting to assign JSON Objects to a state hook?

Hey there! I've been working on a project with two components, ComponentA and ComponentB. My goal is to send a POST request to my API, save the JSON string that comes back into a useState hook, and then share that state with ComponentB. Inside Compone ...

javascriptjsonreactjs

What is the best way to reference a dynamic ID in JavaScript when clicking for an action on a different

Here is my HTML code snippet: <table> <tr> <td> @Html.DropDownList("Statues", (SelectList)ViewBag.UserType, string.Empty, new { @class = "NewIDCn",@id = "name1" }) </td> <td> ...

javascriptasp.netasp.net-mvcasp.net-mvc-4asp.net-mvc-3

Tips for selecting a JavaScript Alert above the browser's display

WebDriverWait wait = new WebDriverWait(driver, 3000); wait.until(ExpectedConditions.alertIsPresent()); Alert alert = webDriver.switchTo().alert(); alert.accept(); When I attempt to click on the Allow button after clicking a link that prompts me to update ...

javascriptjavaseleniumselenium-chromedriver

What is the best way to send information to a Vue component so that future changes are automatically displayed?

I am currently working on dynamically updating a Vue JS prop after the view has loaded and the custom has been initialized. In my project, I am building a custom Vue plugin where I use props to pass options, one of which is an object that needs to have its ...

javascriptvue.jspluginsvuejs2

Restricting the Vue for-loop results to display only the current item in use

Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post. <div v-for="p in posts" style="padding: 16px"> <div> &l ...

javascriptarraysvue.jsfor-loopdynamic

Creating a timestamp with milliseconds in Node.jsORObtain

I'm looking for guidance on creating a datetime stamp like the one shown below using Node: 2019-02-20T10:05:00.120000Z To clarify, I need a date time format that includes milliseconds. Thank you in advance. ...

javascriptnode.js

What is the quickest way to efficiently load a high volume of objects in Three.js?

Currently, I am investigating ways to optimize the loading and generation time of a large number of objects in Three.js. These objects are created using individual vertex points that form a 2D footprint. Initially, I created THREE.Shape objects from the v ...

three.jswebgl

Creating HTML elements using JavaScript compared to importing an HTML fileIn JavaScript,

I am currently in the process of building a website that is entirely driven by JavaScript. Aside from the index page, I do not use any HTML pages at all. Instead, I fetch JSON data for every query and then dynamically generate HTML within the JavaScript to ...

javascripthtmljsondynamic

Refresh the browser tab's content

How can I reload the specific content of a browser tab? I am looking for a solution that does not rely solely on jQuery (although I prefer it if there are more options available). Here is what I need: I have a page with many links to other pages (the fo ...

javascriptjqueryhtmlbrowser

Is there a way to execute this function synchronously in node.js?

Running the function synchronously in my application is crucial. The supply source must be created before it can be assigned to other data, otherwise the process will fail due to undefined SupplySourceId. I am initiating the synchronous function here (pro ...

javascriptnode.jsfunctionasynchronouspost

Troubleshooting jQuery Div Separation Problem

Currently, I am working on implementing resizable sidebars using jQuery and potentially jQueryUI. However, I am encountering an issue with the resizing functionality. Specifically, the right sidebar is causing some trouble in terms of proper resizing, wher ...

javascriptjqueryjquery-uisplit.js

React Foundation accordion not functioning properly

Utilizing Foundation accordion within my React component has presented a challenge. The code functions properly when rendering static HTML, but when attempting to render it dynamically through a loop, the accordions lose their clickability. React code fo ...

javascriptreactjszurb-foundation

Embed JavaScript code within the Material-UI components

I am working with the material-ui ListItemText: <ListItemText primary={<div> <Table className={classes.table}> <TableRow> <TableCell width="40">{item.issue_state}</TableCell> <TableCell width="40">{ ...

javascriptnode.jsreactjsmaterial-ui