Is there a way to modify the fundamental characteristics of a Geometry within Three.js? Such as adjusting the radius, number of vertices, and other parameters?

My task involves creating a tetrahedron with a radius of 3

   // create a tetrahedron
   var tetGeometry = new THREE.TetrahedronGeometry(3);
   var tetMaterial = new THREE.MeshLambertMaterial(
        {color: 0x20f020, transparent:true, opacity:0.6});
   tet = new THREE.Mesh(tetGeometry, tetMaterial);
   tet.name='tet';
   tet.castShadow = true;

As the project progresses, I need the tetrahedron to increase in size:

   // change tetrahedron size
   scene.getObjectByName('tet').radius = control.tetrahedronRadius;

However, this method is ineffective.

   // modify vertices
   scene.getObjectByName('tet').detail = control.tetrahedronVertices;

Even this approach fails to yield results.

   scene.getObjectByName('tet').verticesNeedUpdate;

Unfortunately, this does not provide a solution either.

So, how can I adjust the radius and vertices of a tetrahedron (or any geometry)?

The documentation mentions various properties such as:

  • Geometry
    • .dynamic
    • .morph
    • .verticesNeedUpdate
    • .scale

Moreover, there are discussions about bones, skeletons, and skinned meshes for animating geometries.

What is the recommended approach for altering these aspects of geometries?
How can I effectively enlarge the radius of a Tetrahedron or manipulate the number of vertices to transform it into a different polyhedron?

Answer №1

To modify the shape of an object, you will need to utilize the following code:

morphTargets: true

Check out this example using a pyramid as demonstrated in jsfiddle. Adjust the sliders to alter the geometry.

If you want to create custom vertices and connect them with faces, it requires a solid understanding of mathematical concepts like points and vectors.

I have created two basic flat shapes, a triangle and a square, on jsfiddle.

I trust that this explanation clarifies the process for you.

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

Comprehension of async/await and the concept of promises

I am currently developing in node.js version 18.2.0 and here is the snippet of code I am working on: async function res_asyncf(){ await setTimeout(r => {}, 1000); } const res_promise = new Promise(async r => { await setTimeout(r, 1000); }); asyn ...

What are some strategies for increasing efficiency in my drag and drop process?

Update #2 Wow, transition was stuck at .35s. My CSS just wasn't updating properly :( UPDATE: Anyone know if requestAnimationFrame could help with this? I've got a rotating image reel and I want users to be able to swipe left or right to switch ...

Leveraging the power of React Native with embedded RapidAPI functionality in the source

I had previously used the following code to retrieve a JSON file containing personal data in my React Native source code: async componentDidMount() { try { const response = await fetch('mydomain.org/personaldata.json'); const responseJson ...

Instructions on how to automatically close a Bootstrap 5 alert without using jQuery

With the removal of jQuery as a dependency in Bootstrap 5, I have been exploring ways to automatically dismiss an Alert after a set duration using raw Javascript. Below is a snippet of my current approach. I believe there is room for optimization or a bett ...

Deactivate the JQuery datatable checkbox after user selection

Is there a way to deactivate the checkbox in my data table's first column? I want all selected checkboxes to be disabled when a specific button is clicked. After using table.column(0).checkboxes.selected(); I was able to obtain the indices of selec ...

Create a visually appealing masonry grid layout by using CSS column-count and horizontal alignment

I have successfully created a masonry grid using the column-count property with 4 columns. However, all the div elements in the grid are displayed vertically. Is there a way to change this layout and display them horizontally using JavaScript or jQuery? ...

Tips for creating a nested array in Vue.js in the correct way

In my Vue application, I am currently receiving a JSON object structured like this: [ { "meetingName":"ewq", "meetingUrl":"", "meetingPw":"", &qu ...

Loop through a list of form names using ng-repeat and send each form name to a JavaScript function when clicked

I have multiple forms within an ng-repeat loop, each with a different name. I need to pass the form data when a button inside the form is clicked. However, when I try to call it like this: checkSaveDisable(updateProductSale_{{productIndex}}) it thro ...

most efficient method of sharing information between various angular controllers

I am looking for a way to share form data among multiple controllers before submitting it. Currently, I am using module.value() to store the data as a global variable. var serviceApp = angular.module('sampleservice', [ ]); serviceApp.valu ...

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

Tips for displaying specific elements from an array by their ID when a button is clicked

I am facing an issue and need some help with my code structure. Below is the array I am working with: const countries = [ { id: 1, props: { url: '/images/polska.jpg', title: 'Polska', width: width, ...

Stopping the mouse from scrolling

I am facing an issue on my page where scrolling a textbox to the bottom causes the entire document to scroll as well. How can I prevent mouse scrolling on the document but still allow scrolling within the textbox when the mouse is over it? It's import ...

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

I'm having trouble with an inline condition for loading scripts. The condition seems to be working because the tag is displaying text, but when it comes to scripts, it doesn't work. How can I resolve this issue? const cookie = new Cookies().get ...

Encountering a fatal error "Segmentation fault: 11 bash -l -c ..." while attempting to compile a React Native app

My Objective While using react-native, running yarn run:ios to launch an existing app results in an error preventing it from working properly. Situation The current execution environment is as follows: System: OS: macOS 13.6 CPU: (8) arm64 Apple ...

Vue.js navigation guards, restrict access to all unauthorized routes, grant entry to specific routes upon successful authentication

I'm currently working on implementing a navigation guard in Vue.js with a specific logic: I want to restrict access to all routes that require authentication and redirect users to the login page if they are not authenticated. The only exception is the ...

assigning a value of undefined to the selected option in AngularJS

How can I use angularjs ng-options and ng-model directives to set the select option and detect when the dropdown option is selected or changed? I want to include an extra empty option so that the user can deselect it, and in that case, I want the value in ...

When toggling visibility with JS, the Bootstrap Grid Row may not center-align as expected

Sorry for the odd spacing issue that might occur. I currently have a basic Bootstrap Grid setup as follows: <div class="row justify-content-center" align="center" id="details"> <div class="col-sm-2"> ...

Find distinct elements in an array of objects

Imagine you have an array filled with different objects: var itemsArray = [ {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "yellow", weight: "120g"}, {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "y ...

Adjust the parent div's background color when a radio button is selected

Is it possible to dynamically change the background color of a div that contains a radio button when the button is checked? Here is an example of the HTML code: <div class="custom-container"> <input id=“example” type="radio" name="opt ...

What is the best way to incorporate background audio in Next.js?

I'm working on a project using Next.js and have encountered an issue with my audio player. Whenever the page is reloaded or left, the audio stops playing. I've tried using an iframe to keep the audio playing in the background, but it prompts me t ...