Scale the cylinder in Three.js from a specific point

Can a cylinder be resized along the Y-axis starting from a particular point?

Instead of the cylinder expanding from its center in both directions to the new scale, is it possible for it to grow upwards/downwards only like a bar chart?

Current code :

function animate() {
    render();
    cylinder.scale.y += 0.1;
    requestAnimationFrame(animate);
}

Answer №1

To accomplish this, you can use an Object3D as an intermediary:

let cube = new THREE.Object3D();
scene.add(cube);

let cubeMesh = new THREE.Mesh(geometry.material);
cube.add(cubeMesh);

cubeMesh.position.y = 2; // adjust pivot upwards
cube.scale.y += 0.1;

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

Unable to apply ng-class when condition is met after ng-click

I am currently experiencing an issue with ng-class. When I click, I pass a variable and then check if it is true in ng-class. If it is indeed true, I append the "col-xs-6" class. Here is what I have attempted: <div ng-class="{'col-xs-6': myV ...

Trying to access properties of undefined

I am having trouble adding the form control class to my select statement. The issue arises when props become undefined. Here's the code snippet: const useStyles = makeStyles({ root: { width: "100%", maxWidth: 500 } }); const cl ...

Move to the following array when clicking PHP (using Ajax, perhaps?)

How can I trigger php code when a button is clicked? (I understand the distinction between client-side and server-side. However, I believe I have encountered a similar scenario before.) Consider the following array : $test_id = [ 1 => '15 ...

How can one go about constructing abstract models using Prisma ORM?

Among my various prisma models, there are common fields such as audit fields like created_at and updated_at. model User { id Int @id @default(autoincrement()) created_at DateTime @default(now()) updated_at DateTime @updatedAt email ...

Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

I need help with my code involving two functions in the mutations and two pieces of state const state = { files: [], uploadProgress: 0 } const mutations = { SET_UPLOAD_IMAGE: (state, files) => { state.files = files }, UPLOAD_IMAGE: ( ...

Guide to refining a JSON array using a pre-established list

I'm in need of assistance figuring out how to accomplish the following task: Below is the code snippet I am working with: public class Data { public string FirstName; public string LastName; public int Age; } var data = new Data { //this objec ...

The dropdown menu component in ReactJS is malfunctioning

I'm currently working on a form that includes a select box which fetches data from the server and posts it back to the same server. I have implemented the select box component from ant design. Unfortunately, I've encountered an issue with the ha ...

Using Javascript regex to remove spaces inside parentheses

Can you provide the specific Javascript regex code for removing spaces only within parentheses? Take for instance: balance( 11010000 ) / balance( 11050000 ) The desired output should be: balance(11010000) / balance(11050000) ...

Ways to verify the element prior to the completion of the request?

Utilizing Angular and Playwright Within my application, I have incorporated 2 buttons - one for delete mode and another for refreshing. Whenever the user triggers a refresh action, the delete mode button is disabled. Once the request returns, the delete m ...

Can you explain the variance in these code snippets when implementing React's setState() function?

Can you explain the variance between these two blocks of code? this.setState((state)=>({ posts: state.posts.filter(post=> post.id !==postRemoved.id) })) versus this.setState((state)=>{ posts: state.post ...

Limiting the combinations of types in TypeScript

I have a dilemma: type TypeLetter = "TypeA" | "TypeB" type TypeNumber = "Type1" | "Type2" I am trying to restrict the combinations of values from these types. Only "TypeA" and "Type1" can be paired together, and only "TypeB" and "Type2" can be paired tog ...

Update a particular class following an AJAX POST request in JavaScript

After conducting extensive research, I have come here seeking your assistance with a particular issue: I am using a comment system with multiple forms on the same page (utilizing FOSCommentBundle in Symfony). My goal is to be able to post comments via Aja ...

Deactivating elements on a website

Is there a way to prevent multiple transactions due to unintended repeated clicks on a button by disabling all webpage elements when the button is clicked? Suggestions include using a div that can be layered on top of the elements when the button is click ...

React error: File undefined (cannot be exported)

Encountering an issue while attempting to follow a tutorial: src/components/MyApp.js Line 17:18: 'myApp' is not defined no-undef Search for the keywords to learn more about each error. This is what my myApp.js file contains: import React fr ...

Animating the mobile menu transition using Bootstrap CSS

Can anyone help me with animating the mobile menu when I click the menu icon? This is what I have for the menu: .overlay-menu { position: fixed; display: none; z-index : 1040; width: 100vw; height: 100vh; background: rgba(0, 0,0, 0 ...

Notification issues in Vue with Firebase Cloud Messaging while in foreground

I have been working on implementing FCM in my Vue PWA application. I have successfully configured background notifications, but I am facing issues with handling notifications when the app is open. Here is the code I am using. src/App.vue import firebase ...

exploring the digital archives for a specific song file on the computer

Currently in the process of building a website, and I am looking to incorporate a search and filter feature for all music content so that users can play it on my player. Wondering if this is possible? Seeking some assistance and creative ideas to make thi ...

Experience the feeling of releasing momentum by click and dragging the scroll

One feature I am looking for is the ability to control the scroll speed when dragging, and have the scroll continue moving slightly after release instead of stopping instantly. CodePen: https://codepen.io/rKaiser/pen/qGomdR I can adjust the speed adequat ...

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

Building a custom DSL expression parser and rule engine

In the process of developing an app, I have included a unique feature that involves embedding expressions/rules within a configuration yaml file. For instance, users will be able to reference a variable defined in the yaml file using ${variables.name == &a ...