Is it possible for mesh1 and mesh2 to automatically adjust their positions based on scale?

I have a goal to connect the right side of mesh 1 with the left side of mesh 2.

Whenever I scale mesh 1, it requires me to readjust the position of mesh 2 in order to maintain the original distance between them.

Let's try scaling mesh 1 by setting z: 2

var tween = new TWEEN.Tween(mesh1.scale).to({ z: 2 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);

To keep the same distance from mesh 1 as before, I must reposition mesh 2 to z: 1.5 

var tween = new TWEEN.Tween(mesh2.position).to({ z: 1.5 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);

Is there a way to automatically adjust the position of mesh 2 when scaling mesh 1 so they stay connected?

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

...

var geometry = new THREE.BoxGeometry( 1, 1, 1 );


var mesh1 = new THREE.Mesh( geometry, 
new THREE.MeshPhongMaterial({color: 0x222222}));
mesh1 .position.set( 0, 0, 0 );
mesh1 .scale.set( 1, 1, 1 );
scene.add( mesh1 );

var mesh2 = new THREE.Mesh( geometry, 
new THREE.MeshPhongMaterial({color: 0x222222}));
mesh2 .position.set( 0, 0, 1 );
mesh2 .scale.set( 1, 1, 1 );
scene.add( mesh2 );
javascriptthree.js

Answer №1

This problem involves geometry.

While I am new to working with three.js, I have a geometric solution in mind.

Let's introduce a hypothetical third mesh, mesh3, which combines elements of both mesh1 and mesh2.

Here's how it looks:

mesh1: position(0, 0, 0), scale(1, 1, 1);
mesh2: position(0, 0, 1), scale(1, 1, 1);
mesh3: position(0, 0, 0), scale(1, 1, 2); // Essentially, mesh3 = mesh1 + mesh2

To resize the structure by a scalar value k, I suggest two methods:

Method 1:

  1. Scale mesh1 and mesh3 individually by k.
  2. Determine the dissimilarity between mesh3 and mes... <li>Assign <code>mesh2 as the value of meshDiff.

Method 2:

  1. Resize mesh3 by k.
  2. Segment mesh3 into two sections, mesh31 and mesh32, aligning them with mesh1 and mesh2 respectively.
  3. Set mesh1 as mesh31 and mesh2 as mesh32.

Both methods are quite similar. Consider the API of three.js when choosing the most appropriate method.

Note: There is no need to render mesh3. It serves solely as a computational aid.

Applicability:

The concept introduced can be applied in other scenarios where geometries with shared characteristics require scaling adjustments.

I hope this explanation proves useful.

PS: Acknowledging that this response may be somewhat abstract, I still trust it provides valuable insight.

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 traditional JavaScript, bring in a class from Node.js

I have a mix of files utilizing the Node.js framework and others that I'd like to incorporate without it. When attempting to import a class from my Node files, where module.exports was used, into my JavaScript files, I encounter an error stating "the ...

javascriptnode.jsimportexport

I am facing a challenging issue with React on my console and finding it difficult to resolve

Below is the code snippet from my ShoppingList.js file, ` function ShoppingList() { return ( <ul className="lmj-plant-list"> {plantList.map(({ id, cover, title, description }) => ( <PlantItem to={"/ ...

javascriptreactjskeyprop

Cordova Vuejs Android build encountered an error (Task ':app:processDebugResources' execution failed)

When I attempted to run Cordova on my Android device using "cordova run android / cordova build", I encountered the following error: FAILURE: Build failed with an exception. What caused the issue: Execution failed for task ':app:processDebugResourc ...

javascriptandroidcordovavue.js

Is there a way to limit the rotation of an a-camera in aframe?

One scenario could be enabling rotation around the z-axis within a range of -70 to 70 degrees, or alternatively, preventing rotation around any arbitrary axis. Thank you! ...

javascriptthree.jsaframe

The sequence for conducting operations within a function in JavaScript (Vue.js)

I am currently working on building a contact-list app using Vue.js. Each contact in the list can have multiple addresses, emails, and phone numbers. To accommodate this, I have set up inputs and a button to add additional fields as needed. My issue arises ...

javascriptvue.jsvuejs2vue-component

Leveraging the power of CreateJS in partnership with Chart.js

Can anyone provide guidance on how to integrate a chartjs radar chart into a createjs canvas stage? I am attempting to use chartjs to generate the chart and then position it within the createjs stage. Any suggestions or advice would be greatly appreciate ...

javascriptjquerycanvaschart.jscreatejs

PhantomJS fails to trigger function within page.evaluate

My current project involves scraping data from a Facebook page using the PhantomJS node module (https://github.com/sgentle/phantomjs-node). However, I am facing an issue where the function I pass to evaluate the page is not being executed. Interestingly, w ...

javascriptnode.jsphantomjs

Setting up npm packages for a Node application

Currently working on developing an npm package for testing purposes and looking to incorporate TypeScript. However, the creation of a node_modules folder is unnecessary. Is there a way to install npm dependencies without generating the node_modules folde ...

javascriptnode.jsnpm

Is it ever considered safe to manually relocate a DOM node rendered by Vue? If so, when?

I am aware of the risks associated with manually manipulating DOM nodes rendered by a Vue component, such as: Vue overriding changes after another render Potential interference with Vue's patching algorithm My specific scenario involves wanting to m ...

javascriptvue.jsvuejs2

Scrolling will only function properly on this page if you refresh it

I have a setup where buttons on my first page lead to specific elements on the second page. To achieve this, I pass the element IDs in the URL like so: mysite.com/secondpage/:promo1(/2/3, depending on the button clicked.) Upon landing on the second page, ...

javascriptjqueryangularjsscroll

AngularJS $resource sends the id as a query parameter rather than including it in the URL

I'm trying to retrieve data from a rest API by using the product id as part of the URL, rather than as a query parameter. Here is the factory code: .factory('Products', ['$resource', function($resource) { return $reso ...

javascriptangularjsangular-resource

Handle all link clicks on the webpage

My challenge is that some users are required to utilize a virtual desktop in order to access specific information on my website. However, within the virtual environment, there are links leading to external content that do not function properly. I am seekin ...

javascriptphpjqueryhtmlvirtual-machine

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

Is there a way to effectively reuse the same image multiple times on my website without inefficiently downloading it each time? ...

phpjavascripthtmlcssimage

Can you explain the purpose of the equals sign in ngRepeat?

Can you explain the significance of the equals sign in the ng-repeat attribute value? <li ng-repeat="person in people = (people | orderBy: firstname)"> rather than using: <li ng-repeat="person in people | orderBy: firstname"> I coul ...

javascriptangularjs

Use React to dynamically render a table by mapping over an array to generate

I'm facing an issue where I am trying to display an array within a specific section of a table, but it's not displaying. Even though all the values are being fetched correctly. const renderReturnReasons = () => { dailyReportDetailItem.re ...

javascriptreactjstypescript

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify

When using JSON.stringify on a Json data, I noticed that the resulting string includes double quotes at the beginning and end. For example: x = {fieldId: 536, value: {value: 341, display_value: "ABCD"}} After using JSON.stringify, the result looks like t ...

javascriptjsonreactjs

Whenever I attempt to use window.print(), the styling gets completely messed up. I've experimented with both @media screen and @media print, but unfortunately, I

I am working on creating an invoice, the design looks perfect in the browser, but when I try to window.print() the style gets corrupted. I attempted to include @media screen and @media print, but I am still facing the same issue. The invoice form is incorp ...

javascripthtmlcssbootstrap-4

Optimize the performance of filtering large GeoJSON files using Ajax in leaflet for the

I am managing four 2MB geoJson files with four different Layers that need to be loaded. Each layer is loaded using the following code: LayerBoon = L.geoJSON.ajax(URL, {pointToLayer:returnBoonMarker, filter:filtertext}); There is also a button click functi ...

javascriptajaxfilterleafletgeojson

Troubleshooting issue with breakpoints in GWT SuperDevMode

When using IntelliJ, I encounter an issue where placing a breakpoint in a class sometimes leads me to the MyApp-0.js file in the debugger, resulting in debugging of generated Javascript. Is there a way to navigate with breakpoints in the corresponding Java ...

javajavascriptgwtintellij-idea

What is the best way to ensure that items have been properly loaded?

I am currently working on a system that involves three distinct item types: courses, packages, and programs. Users have the option to filter by All or by one of these three specific types. However, I am facing a challenge in how to handle the scenario wh ...

javascriptreactjsuse-effect