Steps to modify the ShapeGeometry in three.js

As a beginner in three.js, I encountered an issue where updating a ShapeGeometry wasn't working as expected. This resulted in me having to remove and re-add the ShapeMesh every time.

    this.mesh.geometry.dispose()
    this.mesh.material.dispose()
    this.scene.remove(this.mesh)

    //vertex
    this.triangleShape = new THREE.Shape()
    this.triangleShape.moveTo(  -612+this.Eposition.left, 310-this.Eposition.top-25 )
    for(let i = 0 ; i < length ; i++) {
        this.triangleShape.lineTo(data[i][0],data[i][1])
    }
    this.triangleShape.lineTo(  -612+this.Eposition.left+141, 310-this.Eposition.top-25 )
    this.triangleShape.lineTo(  -612+this.Eposition.left+141, 310-this.Eposition.top )
    this.triangleShape.lineTo(  -612+this.Eposition.left, 310-this.Eposition.top )
    this.triangleShape.lineTo(  -612+this.Eposition.left, 310-this.Eposition.top-25 )// close path
    let geometry = new THREE.ShapeGeometry( this.triangleShape )
    this.mesh = new THREE.Mesh(geometry,this.material)
    this.scene.add(this.mesh)

Despite trying 

this.mesh.geometry.verticesNeedUpdate = true
, it appears that the issue persists.

javascriptthree.js

Answer №1

Regrettably, it is not possible to modify the Shape used by a ShapeGeometry. The Shape serves as a high-level overview of the Geometry it creates, rather than a foundational element of the Geometry itself.

Essentially, the Shape is defined in terms of vector graphics, including curves. When a ShapeGeometry is generated, three.js interprets this description to produce the geometry buffers. This process involves breaking down curves into line segments and converting closed paths into triangles, as done in the ShapeGeometry.addShape() implementation).

If creating a new geometry for each update is feasible from a performance perspective (i.e., not overly complex shapes), it is possible to do so. However, consider developing a customized Geometry or BufferGeometry for more efficient updates, referencing simple structures like the Cylinder[Buffer]Geometry for guidance.

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

Executing javascript href using Python in Selenium

Currently, I am attempting to use Selenium in Python to click on a href JavaScript link. The HTML code appears as follows: HTML Example and my goal is to click on javascript:goType(1). This is the approach I have taken: advance_search = browser.find_el ...

javascriptpythonselenium

Delay loading background image until a specific time has passed, preventing website from fully loading

My website features a vibrant backgroundImage Slideshow that functions seamlessly. However, I am looking to reload the images of the slideshow after a specific time interval. The issue is that the website keeps loading endlessly. Once the website has com ...

javascripthtmlcssajaxweb

Employing square bracket notation based on the input data

I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...

javascriptnode.jstypescript

Creating a versatile TypeScript interface that can accurately represent a wide range of types, interfaces, and objects whilst imposing restrictions on the allowable value types within

I am looking to define a versatile TypeScript interface that can accommodate any type, interface, or object while imposing restrictions on the types of values it contains. Let me introduce MyInterface, which includes properties fooIProp and barIProp stori ...

javascripttypescriptobjecttypesinterface

What are some ways to provide the find() method in JavaScript with a specific search argument?

I've been exploring ways to search within an array while iterating through it. One method I stumbled upon is the find() method. Take a look at this example: var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas&apos ...

javascriptfind

Creating dynamic ng-options in AngularJS

Below is an array: $scope.age = 2; $scope.people = [{name:"Sam",age:2},{name:"Pam",age:3},{name:"Ham",age:4}] The requirement is to make the ng-options dynamic. When age is 2, display all people objects in ng-options. If age is 1, show only the object wi ...

javascriptangularjsselectng-options

Transfer an array via Ajax to a Python server script

I need to send the names, values, and labels of my form elements when a button is clicked. Since the submit button messes up the order, I decided to handle it with JavaScript: $('#mybutton').click(function() { m.modal('show'); ...

javascriptpythonajax

Label Overlapping Issue in React Select

Utilizing react-select version ^5.1.0, I am encountering an issue where the word "select" overlaps with the options when scrolling. An image has been attached for better clarification. How can I eliminate the occurrence of the select word overlapping my op ...

javascriptreactjs

Click to dynamically change the input number variable

I'm in the process of creating a special calculator, where you input the number of years into a field, hit submit, and see different results displayed below without the page reloading. All my calculations are working properly at the moment. However, ...

javascriptjqueryhtmlfunction

The .ajaxSubmit function in jquery.form.js seems to be malfunctioning when using the data option

I'm currently working with the jQuery plugin jquery.form.js and I'm looking to programmatically submit a form while including a file. Although I've set up the code and options to work with $.ajax, it's not functioning with .ajaxSubmit. ...

javascriptjqueryajaxforms

Tips for transmitting form information in a fetch call

As I was developing a nodejs server, I encountered an issue with the POST call that involves sending form input data to a remote server. Despite everything else working fine, the form data was not being received by the server. Below is the code snippet in ...

javascriptnode.jsfetch

Troubleshooting issues with Three.js and .obj file shadows

I've been diving into learning Thee.js, and while it's fairly straightforward, I've hit a roadblock with getting shadows to work. Despite setting castShadows, recieveShadows, and shadowMapEnabled to true in the appropriate places, shadows ar ...

javascriptthree.jsshadow

Utilizing Angular controllers to access data attribute values from child elements

Today I embarked on the journey of learning AngularJs through online tutorials. Excited about my new project, I started working on creating some useful features using Angular. Here is a snippet of my progress so far: The HTML Part <div data-ng-control ...

javascripthtmlangularjs

indexing into a nodelist results in an undefined value

In my current code snippet, I am using the following: const modelInputs = document.getElementsByName('jpd-model') console.log(modelInputs) This code returns a NodeList of all the matching elements. However, if I modify the code to this: const m ...

javascriptdomnodelist

Using express.js to retrieve a JSON file via the command line

In need of assistance on how to retrieve a JSON file using express.js. My goal is to access it through the Mac terminal for a college assignment that involves creating an HTTP server acting as a basic data store. The requirements include responding to GET, ...

javascriptjsonnode.jsrestexpress

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

javascriptcssunit-testingbrowsersyntax-error

Ways to verify the user's authentication status on the server end

Before displaying an HTML page, I need to verify user authentication. Here is a snippet from my server.js: const express = require('express'); var jquery = require('jquery'); var admin = require("firebase"); const app = expre ...

javascripthtmlexpressfirebase-authentication

The Formik Material UI Localization Provider is not functioning properly when paired with the Luxon Adapter for formatting dates in

Currently, I am utilizing the MUI localization provider in conjunction with the luxon adapter to transform the date format to GB. However, despite my efforts, the date remains in the mm/dd/yyyy format rather than displaying as dd/mm/yyyy. Please refer ...

javascriptreactjsmaterial-uiluxonformik-material-ui

retrieving data from a dropdown selection

Help! I'm stuck and need guidance. Below is the code I've been working on, attempting to set a variable using a drop-down list. Despite trying everything I can think of, I still seem to be missing something simple. Any hints or nudges in the righ ...

javascripthtml

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

Recently I started working with Node.js, but I encountered an error when trying to run a program. The error message says "the term nodemon is not recognized the name of cmdlet, function, script file or operable function". Can someone please assist me with ...

javascripthtmlcssnode.jssocket.io