Resizing Three.js meshes

I imported a 3D model as an obj file into Three.js, which represents a piece of furniture.

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

The issue I'm facing is that the material for the furniture is dynamic and varies in thickness. I need to increase the material's thickness without altering the overall size of the model. Scaling is not an option in this case.

Is there a way to resize specific parts of the model (certain meshes) without compromising the structure of the mesh itself? I only want to adjust the thickness of the structure, while keeping the internal parts unchanged.

The approach I am considering involves modifying the scale of some meshes and adjusting the global position of other meshes based on those changes. Is this the correct method?

object.traverse(function(child) {
    if (child instanceof THREE.Mesh) {
        // Resize and reposition certain meshes
    }
});

Potential solutions include:

  1. Bones
  2. Deformation
javascript3dthree.js

Answer №1

When dealing with separate primitives in meshes, adjusting the scale along one axis can be done for each individual part by setting up anchor points to maintain the outer shell. For instance, scaling an empty object that holds adjacent mesh pieces will ensure the overall shape is preserved.

For example:


 OOOOOO
OMMMMMMO
OMmmmmMO
OMmmmmMO
OMMMMMMO
 OOOOOO

In this visualization, 'O' represents an Object3D containing Mesh-M, while 'm' depicts scaled individual meshes. By modifying the scale of both 'm' and 'O', you can retain the outer shell appearance.

It's essential to use proper traversal methods when making these adjustments. Assigning a specific attribute within the .userData object to items needing modification simplifies the process. This ensures that scaling is applied correctly either to empty objects (O) or directly to meshes (m).

object.traverse(function(child){
    if(child instanceof THREE.Mesh){
        if(child.userData.isScalable){
            //perform scaling here
        }
    }
});

With a well-organized hierarchy and appropriate tagging in place, scaling components becomes straightforward, preserving the integrity of the outer shell as desired.

Does this address your query? Clarification may be needed for further assistance.

Answer №2

For those looking to manipulate geometry in a web-based 3D modeling tool, Clara.io is a great option since it utilizes ThreeJS and offers a variety of operators to modify your creations within the platform. One notable feature is the thickness operator which can be applied to shapes in Clara.io.

To learn more, check out the documentation available at:

With Clara.io, anything achievable in the editor can also be done in an interactive-embed setting.

Answer №3

Utilizing various methods such as adjusting mesh sizes and positions can be helpful, however, it's important to note that using object.scale.set( x, y, z ); may impact your game's performance due to the browser having to constantly change the scale for each frame rendered. To optimize performance, consider utilizing a 3D editor like Blender which offers efficiency and ease of use.

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

Implement a Selection Feature in Angular

Currently, I am working on an application where users can add new rows with the same fields. One of the requirements is to allow users to add an option to a select element. While I have successfully implemented this in jQuery, I am facing challenges integr ...

javascriptjqueryangularjscss

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

javascripthtmliframedom-events

Determine the possible width of a concealed element

I am currently customizing the lavalamp plugin to be compatible with dropdown menus, but I have come across a minor issue. I am trying to determine the offsetWidth of a hidden element. Obviously, this question is a bit nonsensical. What I actually need is ...

javascriptjquerycss

Having trouble accessing a PDF file using gview

Having trouble opening a document I am unable to preview the documents and I'm not sure what I'm missing. I have read through various StackOverflow questions and answers related to this issue, but still no luck. url = http://192.168.0.6:8077/ ...

javascriptreactjs

Discovering the length of an array using JavaScript

I have a question that may seem silly: How can we accurately determine the length of an array in JavaScript? Specifically, I want to find the total number of positions occupied in the array. Most of you may already be familiar with this simple scenario. ...

javascriptarrays

Is there a way to dynamically adjust the form action based on whether or not JavaScript is enabled?

Is there a way to make a form default to calling a JavaScript ajax function for output, but switch to a PHP page if the user doesn't have JavaScript enabled? <form class="form-inline" role="form" action="javascript:search();"> <div class=" ...

javascriptphpjqueryajax

When using express to serve a static file with sendfile, the route specified is considered as the relative directory rather than its actual location directory

I'm facing an issue with a route in Express router.get('projects/fest', function(req, res, next){ res.sendfile('fest.html', {root: './public'}); }); When accessing localhost:3000/projects/fest, the HTML file is disp ...

javascriptnode.jsexpress

Step-by-step guide to implementing dynamic field autocomplete using AJAX techniques

Seeking assistance in merging ajax autocomplete with dynamic field input. The autocomplete feature is currently working on the first field, but when adding another field, the autocomplete stops functioning. Any help would be greatly appreciated. Here is t ...

javascriptjqueryajax

Tips for adjusting the size of a three.js object without changing its position

I'm working on animating a sphere made up of dots, and I'm facing a challenge. I want each dot to remain on the surface of the sphere while it resizes. Currently, I am attempting to scale the mesh or geometry of a specific point on the surface, b ...

javascriptthree.js

Different Techniques for Defining Functions in an AngularJS Controller Using the controllerAs Method

When using the 'controller as' approach instead of $scope, I am encountering issues with method calling from HTML. My question is, how many ways are there to declare and call functions using this approach? First: (For executing something initial ...

javascriptangularjsfunctionangularjs-controlleras

What could be the reason for my Ajax failing to send the data to the external file?

My current setup involves sending data to an external PHP file via AJAX in order to generate a PDF using TCPDF and return it back to the page. However, I seem to be facing some issues with this process. Despite my efforts, I am unable to pinpoint the mist ...

javascriptphpjqueryajaxtcpdf

Retrieve the value of an li element and send it to an AJAX request

I am experiencing an issue with my treeview list where I am trying to send the id of the selected li element via ajax, but for some reason, the code is not functioning as expected. You can view the old code here: http://jsfiddle.net/esS4k/379/ Check out ...

javascriptphpjqueryajax

Ajax request missing Github Basic OAuth token in authentication process

My personal access token is not being passed to the request when I make an ajax call. I keep receiving an error message saying API rate limit exceeded for 94.143.188.0. (But here's the good news: Authenticated requests get a higher rate limit.. I atte ...

javascriptjqueryajaxgithub-api

What is the best way to send my webform data to a web API controller as a model class using JQuery AJAX?

This is the AJAX code I have written to pass two values to my API: function submitData() { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ type: 'POST', ...

javascriptc#jqueryajaxasp.net-web-api

Adjust the text according to the selected checkbox option

I am attempting to update the displayed text based on whether a checkbox is currently checked or not. The value of the viewable text should reflect the user's selection. I believe I am close, but the functionality is not working as expected. <html ...

javascriptjqueryajax

Launching a program through a web browser - a step-by-step guide

I am looking to create a specific sequence of events: A web browser opens, and a user logs in (the exact action is not crucial) The user is then redirected to a new page where another program should automatically open This process is similar to what happ ...

javascripthtmlweb

Toggle the on and off functionality of a button using ajax response for content display

I'm struggling to figure out why the button isn't working for me. I am familiar with how to enable and disable buttons using attr and prop. $(document).on("click", "#btn", function(){ $(this).html("Sending..."); $(this).prop("disabl ...

javascriptjqueryajax

Calculate the total value of selected checkboxes in every row of the table

I am looking to calculate the total sum of checkboxes for each row in a table Javascript : For Sum $('input[type="checkbox"]').change(function() { var total = 0; $('#mytable tr').each(functi ...

javascriptphpjqueryfunctioncheckbox

Unable to execute an Angular 2 application within Visual Studio 2015

I encountered an error while trying to set up an environment on VS 2015 with Angular2. Whenever I run the command "npm start," I receive the following error message. I attempted using "npm cache clean --force" before running "npm start," but the error pers ...

javascriptnode.jsangulartypescriptnpm

Error encountered: expected application router to be connected

I encountered an error while trying to migrate from next 12 to next 13 on my old project. Check out the Console Error Log Despite looking for faults in my code, I couldn't find any reason for these errors. Even after extensive Googling, no solution ...

javascriptnode.jsnext.jsnext.js13