Creating intricate 3D models with Three.js

Essentially, I want to adjust the size of my mesh along the x-axis by adding "1" when a radio button is checked. If the radio button is unchecked, I want to reverse this action.

Usually, I would achieve this by setting the x-axis size as follows:

Something like:

If the radio button is checked

mesh.scale.x = 2;

If the radio button is unchecked

mesh.scale.x = 1;

The challenge in my case arises from the variable scale level of my mesh due to other factors. It's possible that the x-axis scale level might not be "1", but instead something like "3.7".

Given that the above approach doesn't work for me, I'm seeking a mathematical solution that can simply add and subtract "1" from the mesh.

$('input').change(function () {
    if ($('#radio1').is(":checked")) {
        mesh.scale.x += 1;
    }
    if ($('#radio2').is(":checked")) {
        mesh.scale.x += 2;
    }
});

The issue with my current function is that it adds the value onto the previous value each time. Ideally, I'm looking for a solution that subtracts the previous value before adding a new one.

Answer №1

Consider this: scale is a factor that you use to modify the size of an object. Whether you want to increase it by 10%, double it, or decrease it by 30%, scaling operates through multiplication rather than addition. This means you can:

mesh.scale.y *= 1.2; // to grow my mesh by 20%

or

mesh.scale.z *= 0.7; // to shrink my mesh by 30%

Answer №2

If you want to link the scale factor to the radio buttons, you can do it like this:

<input type="radio" value="2" name="scalers" />
<input type="radio" value="1.4" name="scalers" />
<input type="radio" value="3.7" name="scalers" />

Then, use this JavaScript code:

var current_scale = 0;
$("input[name=scalers]").change(function() {
   var new_scale = parseFloat($("input[name=scalers]:checked").val());
   mesh.scale.x -= current_scale;
   mesh.scale.x += new_scale;
   current_scale = new_scale;
});

Just a note from another response, it's possible that you don't need to subtract and add scales as thought. Therefore, adjust the JS accordingly:

var current_scale = 1;
$("input[name=scalers]").change(function() {
   var new_scale = parseFloat($("input[name=scalers]:checked").val());
   mesh.scale.x /= current_scale;
   mesh.scale.x *= new_scale;
   current_scale = new_scale;
});

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

Ways to modify CSS using JavaScript

Can anyone assist me with a custom CSS code that I found? It looks like this: header.type-2:not(.fixed-header) nav>ul>li>a{ color:#000; } I've been trying to change the color to #fff using JavaScript, but haven't had any success yet. ...

Error 8007 encountered when attempting to scale at 100% proficiency. Transformation unsuccessful

Wondering if this could be a bug in Photoshop. When scaling a layer and entering values of 100%, an error message pops up: var srcDoc = app.activeDocument; var numOfLayers = srcDoc.layers.length; // main loop for (var i = numOfLayers -1; i >= 0 ; i-- ...

Is there a way to verify if the current event marks the conclusion of the events transmitted to a webhook?

Currently, I am in the process of coding a Google Apps Script web app that will react to events from the Telegram API using a chat bot. The first step was setting up a webhook to collect these events through the Google webhook. Since logger.log is unavaila ...

"Encountered a 400 Error while trying to access the OpenAI

var openairequest = new XMLHttpRequest(); const payload = ({ "model": "text-davinci-003", "prompt": "say this is a test" }); console.log(payload) openairequest.open("POST",`https://api.openai.com/v ...

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

Click on a link to navigate to a new page using the useNavigate hook in

I have successfully implemented navigation using the useNavigate hook, but I am wondering if there is a way to open the URL in a new tab instead of the current one. Is this achievable? Here's my code: import { useNavigate } from "react-router-do ...

The validity of AngularJS form is constant and always returns true with formName.$valid

I am facing an issue with my Angular application form where even though the input fields are blank, formName.$valid is always true. Below is the HTML code for my form: <form name="contactForm" novalidate ng-submit="processForm(formData)" autocomplete=" ...

What could be causing the browser to only partially display an image?

Have you encountered any issues with the browser not displaying an image fully? It seems like there may be a problem with the image download or rendering process, causing only part of the image to load. My application utilizes node and socket.io. Below ar ...

Issue with Discord.js (14.1) - Message Handling Unresponsive

After developing a sizable Discord Bot in Python, I decided to expand my skills and start learning JS. Despite thoroughly studying the documentation and comparing with my original Python Bot regarding intents, I am facing difficulties getting the message ...

Sort Messages By Date Created

While using Vue, I encountered a general JavaScript question. I am fetching cat messages from an API for a chat interface. The initial call returns an array of objects where each object represents a chat message: data: [ {id: 1, created_at: "2022-05 ...

Is setting cache: 'no-store' in a fetch request enough to mimic client-side rendering behavior in Next.js?

Currently, I am working with Next.js and utilizing the fetch method to retrieve data: const res = await fetch(`${process.env.url}/test`, { cache: 'no-store', }) My understanding is that specifying cache: 'no-store' will trigger a fre ...

How can we effectively streamline these if statements for better organization and efficiency?

Currently, I am dealing with a straightforward if condition structure and aiming to keep the code as DRY (Don't Repeat Yourself) as possible. I believe that I have achieved optimal dryness for my specific situation by utilizing object keys as pointers ...

Perform ng-repeat on an array containing several other arrays

This is an angularjs function that retrieves specific categories. $scope.getSpecificCat = function(p_cat) { $http.get(url+'getSpecificCatJson/' + p_cat).success(function(data){ $scope.specifics = data; }).error(functi ...

Navigate the cursor beyond the span within the content that is editable

I am currently developing a tag input system for a template builder. My main focus right now is on assisting the editor in distinguishing between regular text and formatted text. I am structuring it similar to WordPress shortcodes, where a templated elemen ...

Encountering a glitch with Internet Explorer 10 freezing while trying to implement TypeGeometry in Three

Can anyone offer assistance with a project I've been working on that involves processing a high volume of vertices and normals? While the webgl renderer is able to render it without any problems, the canvas renderer seems to struggle as it hangs indef ...

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

Our team is currently working on developing booking software that requires handling different room pricing based on specific dates. Each room has distinct pricing for weekdays and weekends. ROOM 1 Pricing 1: September 1st - November 3rd, Weekday: $100, W ...

creating intricate services using ngTagsInput

Integrating ngTagsInput into my blog allows users to add existing or custom tags to new posts. The blog utilizes a firebase datasource accessible through a factory: servicesModule.factory("postsDB", function($resource){ return $resource("https://data ...

Using multiple main.js files with RequireJs in Play Framework 2.1.1 Java: A step-by-step guide

While working on a single-page app with AngularJs + RequireJs in Play Framework 2.1.1, I encountered an issue regarding the structure of my application. The project consists of two main sections - an admin dashboard and a normal website - both housed withi ...

In my Express Javascript application, I recently encountered a challenge where I needed to export a const outside of another

I am currently working with a file named signupResponse.js const foundRegisterUser = function(err, foundUser){ if(!err){ console.log("No errors encountered") if(!foundUser){ if(req.body.password == req.body. ...