What is the best way to create height segments from a cylinder in three.js?

My current project involves a cylinder that is divided into multiple height segments, with the number of segments depending on the specific data. Each height segment contains a value that I want to use for extruding the entire circle at that particular height.

This results in a cylinder with spiked edges, giving it a unique appearance.

Initially, I planned on manually adjusting the vertices or faces but I am unable to access them for a specific segment.

Therefore, my goal is to scale the segment at a certain height within the cylinder.

I have tried various methods without success and am now seeking guidance on how to proceed. Any suggestions would be greatly appreciated as I continue to explore different approaches to achieve my desired outcome.

javascriptthree.js

Answer №1

To explore further, take a peek at the code in CylinderGeometry.js on GitHub.

You have the option to duplicate this full function and give it a new name, such as:

 THREE.CylinderGeometry2 = function (...

Next, modify how the vertices are created based on the amount of height segments you want to use.

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

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

javascriptjqueryhtmlcsshighcharts

Prevent a submit button from submitting a form using jQuery

I am working on developing a password manager similar to a chrome extension. The goal is to detect the username and password fields when a user tries to log in to a website, such as Facebook, and then prompt the user if they would like to save these creden ...

javascriptjquerygoogle-chrome-extension

What is the best way to convert my JSON data to HTML using JavaScript?

My dilemma seems to be rooted in the use of backticks. Strangely, an error keeps popping up whenever I try to employ them in my IDE (Brackets). I attempted solutions by testing directly in my Browser and through NotePad++, but unfortunately, nothing seeme ...

javascripthtmljson

Creating these three functions directly in the Parent Component instead of duplicating code in the child component - ReactJS

I am new to React and currently working on a dashboard page that includes a React Table. The page features a customize button that opens a popup with checkboxes to show/hide columns in the table. By default, all checkboxes are checked but unchecking a colu ...

javascriptreactjs

When utilizing multer for handling multipart data, hasOwnProperty appears to become undefined

Below is the code snippet I am currently working with: var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var multer = require('multer'); var user = requir ...

javascriptnode.jsexpressmulter

Performing synchronized execution in a node.js application by utilizing the 'readline' package

Struggling with the asynchronous nature of node.js, despite hours spent on callbacks and researching. I have a program that reads lines from a file using the readline module in node, passing data to async functions within the program. The goal is to proces ...

javascriptnode.jsasynchronousreadlinesynchronous

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

It's baffling why this error keeps appearing... my suspicion is directed towards this particular file. Specifically, firebaseAuth={getAuth(app)} might be the culprit. Preceding that, const app = initializeApp(firebaseConfig); is declared in "../f ...

javascriptreactjstypescriptfirebasenext.js

Utilize Web3.js to interact with a specific function in a deployed smart contract on the Ethereum blockchain from a React application

I am attempting to execute the transferMargin() function from the Synthetix Contract on Optimism Kovan using react/javascript (web3.js) and Metamask. I am encountering an issue where I am unable to successfully trigger the transferMargin function upon a Bu ...

javascriptreactjssolidityweb3js

Utilizing ReactJS to creatively overlay a video on top of an image with the option to

Is there a method to superimpose a video onto an image while having the ability to select the blending mode for them? Similar to how Photoshop and Final Cut provide various blending modes such as Overlay, Multiply, Add, etc. Could there possibly be a libr ...

javascriptreactjs

Experiencing incorrect outcome when using the Number.isInteger() function in JavaScript

I have been experimenting with the Number.isInteger() method on the Chrome console. After running a for loop and checking the result using console.log(arr);, I noticed that the array only contains a single value of 1, like this: [1]; var arr = [1, 2, 3, ...

javascriptarraysstringnumbers

Passing an array of objects as properties in React components

My functional component looks like this: function ItemList({ items }: ItemProps[]) { return <p>items[0].name</p> } Here is how I'm creating it: <ItemList items={items} /> The array items contains objects in the format [{name: &ap ...

javascriptreactjstypescript

Tips on how to showcase the current time in the local timezone on Next.js without encountering the error message "Text content does not match server-rendered HTML."

Currently, I am sharpening my Next.js skills by building a blog. My current challenge involves formatting a static ISO time string (which represents the creation time of blog posts) to match the local timezone of the user. <div className='post-time ...

javascriptnext.js

Ensuring the accuracy of URLs using JavaScript

I am developing a form with an input field for entering a URL and a submit button. I want to incorporate JavaScript validation to show an alert box when a correct URL is entered. Is it achievable using JavaScript? If so, can you please guide me on how to i ...

javascriptphpjquery

What could be causing the issue with the custom Button component not functioning correctly on hover when using MUI Button alongside Tooltip

After creating a Custom Button that envelops a MUI Button to handle default props and other aspects, I encountered an issue that persisted despite simplifying the example. Below is the code snippet along with a link to a codesandbox for reference: CodeSand ...

javascriptreactjsmaterial-ui

Make sure to execute the fire directive only when ng-repeat has completed

Currently, I am utilizing owl carousel with data being fetched through an Ajax call. Once the data populates the HTML content using ng-repeat, I need to trigger the directive that initializes the owl carousel. How can I achieve this? One approach I consid ...

javascriptangularjsajax

Implementing dynamic page loading with ajax on your Wordpress website

I'm currently facing an issue with loading pages in WordPress using ajax. I am trying to implement animated page transitions by putting the page content into a div that I will animate into view. However, my current logic only works correctly about 50% ...

javascriptjqueryajaxwordpress

Why is React App showing up twice on the webpage?

After successfully creating a React app based on Free Code Camp's Drum Machine project that passed all tests on Code Pen, I encountered an issue when transferring the code to Visual Studio. Surprisingly, the app now fails one test (#6) even though it ...

javascripthtmlreactjs

Tips for managing Express.js callbacks and modifying an object's property from within a function

I am currently working with two JavaScript files. I have successfully retrieved data from MongoDB using the method bookDao.getActiveBookByCategoryId(). The Issue I Am Facing: Within the categoryDao.js file, I am attempting to update the resultJson.book_c ...

javascriptnode.jsmongodbexpresscallback

drawImage - Maintain scale while resizing

I am currently working on resizing an image using drawImage while maintaining the scale. Here is what I have so far... window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext(" ...

javascripthtmlcssdrawimage

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

I'm working on a multiple choice quiz and I'd like to add a button or icon resembling X in front of each option (even in front of the radio button), so that when I click on it, only that specific option is deleted. How can I achieve this? For in ...

javascripthtmlcssbutton