"Encountering a problem with object transformation in Three.js using

I'm attempting to adjust both the height (Y) and vertical position of a cube simultaneously in order to keep its base on the same X-Z plane after scaling. The visual display seems to be working correctly, but the actual behavior is not meeting my expectations. The object's position in the Y-direction increases rapidly initially, and then it suddenly disappears. Can someone provide guidance on how to resolve this issue?

To handle these transformations, I have implemented an event listener called mouseMove along with its corresponding listener function:

var fHeight = 5, yShift;
function onDocumentMouseMove(event) {
    var mouseVector = new THREE.Vector3(2*(event.clientX/window.innerWidth) - 1, 1 - 2*(event.clientY/window.innerHeight));
    var projector = new THREE.Projector();
    var raycaster = projector.pickingRay(mouseVector.clone(), camera);
    var intersects = raycaster.intersectObjects( Object.children );
    if(intersects.length > 0) {
        intersects[0].object.scale.y += 0.1;
        fHeight = fHeight*intersects[0].object.scale.y;
        yShift = fHeight/2 - intersects[0].object.position.y - 2.5;
        intersects[0].object.position.y = intersects[0].object.position.y + yShift;                                 
    }
}

Answer №1

Position the corners of your cube in a way that its bottom aligns with the y=0 plane.

By doing this, adjusting object.scale.y will impact the height of the cube specifically, without affecting the base, saving you from the need to readjust the object.

Trust this explanation proves useful.

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

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

There seems to be an issue with the $scope variable not being properly updated within the function in

<button class="button button-primary" ng-click="updateSchedule(controlCenter.selected)"> Update Schedule </button> Calling the updateSchedule function from the button $scope.data = []; $scope.updateSchedule = function(selectedData) ...

Render and download the file concurrently while displaying the view in Express

I'm looking to accomplish a task in Express where I can render a file and download it simultaneously. My current code looks like this: res.attachment('filename.csv'); res.render('pages/result', { data }); However, with this setu ...

Nested Angular click events triggering within each other

In my page layout, I have set up the following configuration. https://i.stack.imgur.com/t7Mx4.png When I select the main box of a division, it becomes highlighted, and the related department and teams are updated in the tabs on the right. However, I also ...

I'm experiencing an issue with Bootstrap 5 where the code runs fine on codeply but not on my local machine

I'm attempting to replicate the scrollspy example found on the Bootstrap website. You can see my attempt here: . Feel free to inspect the code. While the navigation links function correctly, I've noticed that according to Bootstrap's docum ...

What are the steps to build a dynamic webpage in a Django project?

For my Django app, I have successfully created static pages without any ajax requests. However, I now want to add a dynamic subpage that can change its content without refreshing or reloading the entire page. Let me explain what I'm trying to achieve ...

Obtaining a JSON reply using Ember

Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...

In the context of NextJs, the req.body is treated as an object within the middleware, but transforms

Here is the middleware function responsible for handling the origin and CORS: export async function middleware(request: NextRequest) { const requestHeaders = new Headers(request.headers) const origin = requestHeaders.get('origin') ?? '& ...

Using Jquery and AJAX to dynamically fill out an HTML form based on dropdown selection

My goal is to populate a form on my webpage with information pulled from a MySQL database using the ID of the drop-down option as the criteria in the SQL statement. The approach I have considered involves storing this information in $_SESSION['formBoo ...

Tips for navigating to an external website through GraphQL

I am currently utilizing Node.js and Front-end on Next.js. I have a GraphQL server with a GetUrl method that returns a link (for example: ""). My goal is to redirect a client who made a request to that page with a Basic Auth Header. From what I understan ...

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

Learn the steps to assign a Base64 URL to an image source

I am currently facing an issue with an image that is being used with angular-cli: <img src="" style="width: 120px; padding-top: 10px" alt="" id="dishPhoto"> The image has a Base64 url named imgUrl. My intention is to set the image source using the ...

The text becomes distorted and unreadable after the function is applied. It is impossible to decipher the message

There is a function called getResourceText(''), which takes a key as an argument. This function provides a translation of the requested text when it is called. setFilterName = (isFilterChanged, buttonId, filterName) => { switch (filterName ...

Is it possible to relocate the file export button to the row of pagination buttons within Datatables implemented with Bootstrap 5?

Utilizing Datatables within a Bootstrap 5 theme has been seamless, with pagination and file export features working effectively. However, the file export button does not align with the theme, prompting me to seek a way to discreetly place it in the same ro ...

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

Managing time-intensive web service operations using JavaScript callbacks

One of the operations in my Web application involves a function that returns a value, which then needs to be passed to a web service method running separately from the application. This web service operation takes some time to complete and therefore must r ...

The react-leaflet-heatmap-layer-v3 source directory could not be located

Upon attempting to utilize the npm package react-leaflet-heatmap-layer-v3 in my React TypeScript application, I successfully installed it and ran yarn start. However, I encountered the following warning messages: WARNING in ./node_modules/react-leaflet-hea ...

Sending Parsed Information to Callback for Flexible Use

Is there a way to pass the value of coins, or even better, currency to my callback function so I can freely use the parsed JSON data in other functions? function fetchJSON(path, callback) { var jsonReq = new XMLHttpRequest(); jsonReq.onreadystatechang ...

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

Recently, I have started delving into APS.NET MVC WEB API programming. My current dilemma involves creating an ASP.NET WEB API project with the following code: public class ValuesController : ApiController { // GET api/values public IEnumerable& ...

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...