Updating vertices in the RingGeometry using THREE.js

Is there a way to dynamically update the vertices of a RingGeometry in THREE.JS?

Previously, I achieved this by creating a new RingGeometry and replacing the old one's vertices with those of the new geometry. This method worked perfectly in version 6.7 of THREE.JS but stopped working in the latest version (8.9).

Code snippet using version 6.7: 

// Code for version 6.7 goes here
<script src="https://threejs-socketio-basic.herokuapp.com/three67.js"></script>

Code snippet using version 8.9:

// Code for version 8.9 goes here
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

Any insights on why it's not working in the latest version?

javascriptthree.jsgeometryring

Answer №1

Finally, after spending countless hours tinkering around, I have pinpointed the issue!

The latest version of THREE.js requires the flag "elementsNeedUpdate = true;" to function properly.

Check out this functional demo on version 8.9:

scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
renderer = new THREE.WebGLRenderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

counter = 0;
increase = Math.PI / 100;

render = function() {
  requestAnimationFrame(render);
  angle = Math.PI * (Math.sin(counter) + 1.01) / 2; // avoid negatives
  counter += increase;
  ring = new THREE.RingGeometry(4, 5, 40, 1, 0, angle);
  mesh.geometry.vertices = ring.vertices;
  mesh.geometry.verticesNeedUpdate = true;
  mesh.geometry.elementsNeedUpdate = true;
  renderer.render(scene, camera);
};

geometry = new THREE.RingGeometry(4, 5, 40, 1, 0, Math.PI * (Math.sin(counter)+1) / 2);
material = new THREE.MeshBasicMaterial({color: 0xffff00});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 10;
renderer.render(scene, camera);
render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

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

Incorporate CSS file into the head section or directly within the HTML section without the need for JavaScript

I'm facing an issue with adding a CSS file to my webpage using JavaScript code at the bottom of the page. When users disable JavaScript, the file cannot be added. Is there a way to include the CSS file in the page without relying on JavaScript? $(doc ...

javascriptjqueryhtmlcss

How can you display an alert message when new data is successfully added to a database using ajax?

In my web application, I have implemented a functionality to display an alert message when new data is successfully inserted into the database. The Ajax code below is responsible for sending a request to the EditDeleteLecture.php file. However, a challenge ...

javascriptphpajax

Unexpected lag causing delays in jQuery animations

I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...

javascriptjqueryanimation

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Is there a way to call functions when a specific key is pressed along with the CTRL key (on a Windows system)? While testing for a particular keyCode, I used event.keyCode. I researched the codes assigned to each key and assumed that 17 + 73 would represe ...

javascriptjquery

The front-end is responsible for removing the last item from an array

Having an issue with my React code. Here is my parent component: class RoomPrice extends React.Component { constructor(props){ super(props) this.state = { room: this.props.room, prices: [] }; this.handleDeletePrice = this.h ...

javascriptreactjs

Is there a way to export all images that have been imported into a React JS file with just one export command?

In the process of developing a solitaire game using React, I have implemented a Card component that displays a card on the screen based on its suit and number. Inside the Card.js file, there are several imports for image sources, such as: import cardFrontT ...

javascriptreactjs

React components receive props as an empty array when they are being passed to the component

I am passing a state to a component as a prop in the following way: componentDidMount() { axios.get("path/to/data") .then(result => { this.setState({ receivedData: result.data, }); ...

javascriptreactjsreact-props

Tips for acquiring an object to utilize in v-bind within a v-for loop

Consider this code snippet: <ol class="breadcrumb arr-right"> <li v-for="(url,name, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'"> <a v-bind:href ...

javascriptvue.jsvuejs2

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

javascriptjqueryhtmlcss

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

How to print a specific div from an HTML page with custom dimensions

I am looking for a solution to print just a specific div from a website with dimensions of 3"x5". Despite setting up the print button, the entire page continues to print every time. Is there a way to hide all non-div content in print preview? CSS .wholeb ...

javascripthtmlcss

Effective Ways to Transfer Input Parameters to Karate File using npm

I am working on a test script that runs a series of queries. In order to execute the file, I need specific inputs such as URL and authorization header, which will vary depending on the environment. How can I prompt the user for these inputs in the command ...

javascriptnpmkarate

Error discovered in Webpack syntax

I'm a newcomer to webpack and feeling lost on how to properly configure the settings. Here is my project structure: / -- /public -- /js -- app.js -- /css -- app.scss -- /node_modules -- /autoprefixer -- /babel-loader ...

javascriptwebpackbabeljs

Having trouble with React's conditional rendering not working as expected?

I am currently working on updating the contents of my Navbar and Router by using useContext and conditional rendering techniques. Here is a snippet from my App.js: import "./App.css"; import axios from "axios"; import { AuthContextProv ...

javascriptreactjsreact-router-dom

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...

javascriptreactjsdynamicnext.js

What is the best way to execute a series of asynchronous JavaScript functions one after the other?

As I attempt to call the following functions in succession, their return does not always happen in the expected order. Upon discovering asynchronous functions and the concept of using "callbacks," I realized there might be a solution for executing these f ...

javascriptjsonasynchronouscallback

A router that has numerous parameters will not function properly with express.static

I successfully created an express router with the parameter 'router.get('/add')' and it is working perfectly. However, when I added 'router.get('/edit/:id')', the express.static feature stopped working, causing issue ...

javascriptnode.jsexpressstatic

After upgrading, my npm is completely dysfunctional – it keeps showing the error "Cannot read property 'get' of undefined."

Recently, I updated Node.js to the latest version on my computer. Prior to the update, the 'npm' command functioned flawlessly in the command prompt. However, after installing the new version of Node.js, it stopped working completely. All comma ...

javascriptnode.jsnpm

What is the best way to obtain the true dimensions of an HTML element?

Is there a way to determine the dimensions of a <div> element in order to accurately position it at the center of the browser window? Additionally, which browsers are compatible with this method? ...

javascripthtmldhtml

Should the method of creating a Dropdown with Angular be considered a poor practice?

I've recently dived into Angular and successfully created my first dropdown using it, which is working great. However, I'm a bit concerned about the number of comparisons being made and wondering if this approach is considered bad practice. The ...

javascriptnode.jsangularecmascript-6