Adjusting the size of objects in Three.js programaticallyAnswer: "Mod

Currently, I am utilizing the dat.gui library with three.js to allow users to interact with an object and adjust the dimensions of its mesh. While many online examples use scale to modify mesh dimensions like this:

mesh.onChange(function(value){mesh.scale.x = value;});

This method may not be very intuitive for users as it also requires adjusting the object.position when a value is changed. Are there any other approaches that could be more user-friendly? If so, would someone be able to provide a viable alternative with a functional example? Thank you in advance for your insights.

javascriptthree.js

Answer №1

To unravel your query, consider identifying the starting point of your object: is it at the geometric center or a corner? Furthermore, factor in how the scaling operation is implemented.

Setting aside three.js momentarily, performing a scale operation manually can be broken down into three distinct steps:

1 - Move the object's center to the origin of the world coordinates
2 - Apply the scale factor to its vertex position matrix
3 - Return the object to its original location in the world

There are two key assumptions to address:

- Is the focal point of your object at its exact center or at one of its corners?

- Are you looking to expand your object symmetrically from its origin in all directions, or simply enlarge it by retaining its current position while expanding its dimensions outward?

What specific behavior are you aiming to achieve?

.... The usage of object.position will depend on your response

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

Is it possible to enlarge pixel art in EaselJS without causing blurriness?

As I develop a game using EaselJS with pixel art that I'm enlarging, I've encountered an issue. Whenever I scale the art, the image becomes blurry. Is there a method to have it drawn using nearest neighbor filtering? ...

javascriptcreatejseaseljs

Handling click events on several elements in Angular

My Objective: I aim to implement a collapsible accordion feature on a webpage that expands and collapses upon clicking. The expansion is triggered by adding the class collapsible-panel--expanded. My Approach: For each item, I have set a click event as fo ...

javascriptangularonclick

The h2 tag in a React component is not reflecting the updated state, only showing the initial state

I am facing an issue with updating a hook state and displaying it in a h2 tag in JSX. I have initialized the state as an array of objects with 'artist' properties, containing artists Peter and Andrew: const [itemList, setItemList] = useState([{a ...

javascriptreactjsfetch

Developing Angular 2 custom async validators for use in reactive forms

I am currently working on a reactive form that requires unique form controls: this.form = new FormGroup({ name: new FormControl(this.initialValue, [ Validators.required, ], this._uniqueNameValidator.bind(this)), }); To achieve this, I have create ...

javascriptangular

Eliminate elements from an array within a promise

I am facing an issue with the currentBillCyclePath parameter in the following function. I need to use this parameter to filter out certain elements after executing the query. However, inside the while loop, the value of currentBillCyclePath is undefined. ...

javascript

Error: The 'then' method cannot be invoked on an undefined object in the Parse.File.save function

I am currently utilizing the Javascript API for parse.com within an Angular JS application. My goal is to successfully save or update the user's profile picture. Below is the code snippet that I have been working with: Some HTML . . . <input type ...

javascriptangularjsparse-platformpromise

Ways to delete the title from a box in orgChart

Is there a way to remove the title from the box and only show the content? I've searched extensively but haven't found a solution yet. I'm currently using orgChart: https://github.com/dabeng/OrgChart For example, the general manager box s ...

javascriptjqueryorgchart

Having a hard time implementing a subtracting callback function in a JavaScript reduce function

Currently, I am tackling a code challenge in JavaScript that requires me to develop a function called reduce. This function is responsible for reducing a collection to a value by applying a specific operation on each item in the collection over which it it ...

javascriptarraysreduce

JavaScript code for styling changes is not functioning as expected

Check out this code snippet: var moving_nav = document.getElementById("moving_nav"); var logo = document.getElementById("logo"); setInterval(function(){ var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled >= ...

javascriptcss

What is the best way to center an infowindow in Google Maps API V3 when working with a map canvas that has a narrow width?

As an illustration of my point, I have put together a sample page: The issue I am facing is with a narrow map canvas and an infowindow in it. Upon clicking the marker, the map sometimes fails to center properly and the marker along with the infowindow sli ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Waves emanating from the heart of rings

I'm experimenting with creating a ripple effect using Anime.js on an array of dots forming circles. Despite trying various methods, I can't seem to achieve the desired result. Does anyone have any suggestions on how I can make it work? Here&apos ...

javascriptanimationanime.js

I am perplexed by JQuery. It is returning true when comparing an input value from a number type input, and I cannot figure out the reason behind it

Seeking guidance on a perplexing issue. Here is a basic code snippet to depict my dilemma: html: <form> <input type="number" id="someNumber"> <input type="button" id="submitBtn"> </form> jquery: $("#submitBtn"). ...

javascriptjqueryhtmlcss

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Leveraging the power of the JQuery on and off function to add and delete specific event listeners

In my current code, I am utilizing the JQuery on method to link an event handler to the window object: $(window).on('resize', function(e){ /** my functional code goes here **/ e.stopPropagation(); }); The issue I am facing is that this ...

javascriptjqueryjquery-events

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

element, it's strange that I am not receiving any error messages. However, despite this, the jquery datepicker function and numeric plugin are not working on the intended input fields they are supposed to be linked to. This particular page is a simpl ...

javascriptjqueryasp.net-mvcasp.net-mvc-3jquery-ui

Is it possible to create a Bootstrap 4 Modal using JQuery and AJAX?

Currently, I have a form enclosed within a modal, and I am struggling to extract the data from the modal for use in other parts of my application. Despite attempting to follow JQuery and AJAX tutorials to handle the data, I have been unsuccessful in getti ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-4

babel-minify or terser over uglify-js

Exploring ES6+ (modern JavaScript) is a new adventure for me, and I've discovered that in order to use it in browsers, tools like babel-minify or terser are necessary. It's interesting to note that Babili was initially thought to be a separate to ...

javascriptwebpackbabeljsuglifyjsbabel-polyfill

Can similar named variables be restructured or revised in some way?

const { finalScore1, finalScore2, finalScore3, finalScore4, finalScore5, finalScore6, finalScore7, finalScore8, finalScore9, finalScore10, finalScore11, finalScore12, finalScore13, finalScore14, finalScore15, finalScore16, finalScore17, fin ...

javascriptreactjs

Is there a way to dynamically apply styles to individual cells in a React Table based on their generated values?

I'm having trouble customizing the style of a table using react table, specifically changing the background color of each cell based on its value. I attempted to use the getProps function in the column array as suggested by the react table API documen ...

javascriptreactjsreact-tablereact-table-v6

Having trouble configuring Angular-UI Router to work properly with Apache server

My web app is running on my PC through an Apache server, but I'm having issues with the routing provided by ui.route. It seems that the simple state I defined is never being reached. To troubleshoot, I added a wildcard to catch all paths and found th ...

javascriptangularjsapacheangular-ui-router