How to adjust a vertex's position after it has been rendered in three.js

Is it possible to update a vertex position after the rendering process? The vertex changes and update statement in the code provided seem to have no impact on the result. Can you please help identify what I might be overlooking here?

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } ); 
var wireframe = new THREE.LineSegments( geo, mat ); 
scene.add( wireframe ); 
wireframe.geometry.attributes.position.array[0] = 300; 
wireframe.geometry.attributes.position.array[1] = 300; 
wireframe.geometry.attributes.position.array[2] = 3; 
wireframe.geometry.verticesNeedUpdate = true;

camera.position.z = 1000; 
renderer.render(scene, camera);

wireframe.geometry.attributes.position.array[0] = 3;
wireframe.geometry.verticesNeedUpdate = true;  

Answer №1

Make sure to avoid using three.js directly from threejs.org, as it may break with updates. It's best to use your own copy or a versioned CDN.

You should add the following code:

wireframe.geometry.attributes.position.needsUpdate = true;

Remember, changes made in three.js won't be visible until you render them. Adding an extra call to render will display your modifications.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geo = new THREE.EdgesGeometry(new THREE.BoxGeometry(500, 500, 500));
var mat = new THREE.LineBasicMaterial({
  color: 0xffffff,
  linewidth: 2
});
var wireframe = new THREE.LineSegments(geo, mat);

scene.add(wireframe);

wireframe.geometry.attributes.position.array[0] = 300;
wireframe.geometry.attributes.position.array[1] = 300;
wireframe.geometry.attributes.position.array[2] = 300;

camera.position.z = 1000;
renderer.render(scene, camera);

wireframe.geometry.attributes.position.array[0] = 0;
wireframe.geometry.attributes.position.array[1] = 0;
wireframe.geometry.attributes.position.array[2] = 0;

wireframe.geometry.attributes.position.needsUpdate = true;

renderer.render(scene, camera);
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20544852454560100e1111120e11">[email protected]</a>/build/three.min.js"></script>

For more information, consider checking out these tutorials.

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

Instructions for including dependencies from a globally installed npm package into a local package

I've noticed that although I have installed a few npm packages globally, none of them are showing up in any of my package.json files. What is the recommended npm command to automatically add these dependencies to all of my package.json files? ...

What is the best method to retrieve the value of a button that has been selected from a collection of buttons?

Within a functional component, there is an issue where the choose function keeps printing 'undefined'. I have utilized const [chosen, setchosen] = useState([]) within this code snippet. The full code has been correctly imported and the purpose of ...

Collecting all Material-UI components into a single document

Currently, I am engaged in a Meteor project that utilizes Material UI and ReactJS. I wish to streamline the process by creating a single file that imports all necessary Material UI components for my project. This way, instead of adding individual exports ...

Ways to retrieve the most recent state in a second useEffect call?

Currently, I am encountering a situation where I have implemented two useEffect hooks in a single component due to the presence of two different sets of dependencies. My challenge lies in the fact that even though I update a state within the first useEffec ...

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

Struggling to bind a controller post method to a basic HTML form on the view. Trying to understand how to populate the parameter and call the method using form data. Controller method: [HttpPost("addcomment")] public JsonResult AddCommen ...

The Nuxt authentication middleware fails to function properly upon clicking the back button in the browser

When it comes to implementing the protected route in Nuxt, I have found that using middleware is the best approach. In my implementation, I utilized the cookie-universal-nuxt module. Everything was running smoothly until I encountered a bug. When a user&a ...

`Troubleshooting zoom problems with Orbit Controls`

I am currently working on implementing infinite zoom functionality, and I came across an interesting example in three.js that caught my attention: However, as I tried to zoom in on the target vector, I noticed that the zoom factor kept reducing to the poi ...

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

When a hyperlink is clicked, an image appears in the div

Can someone help me with a javascript method that can display an image in a div based on which href link is clicked? I've started writing some code, but I think it needs further development. <script type=" "> function changeImg(){ var ima ...

Error occurred due to a reference to a function being called before it was

Occasionally, I encounter a "Reference Error" (approximately once in every 200 attempts) with the code snippet below. var securityPrototype = { init: function(){ /* ... */ }, encryptionKey: function x() { var i = x.identifier; ...

Is it possible for me to create an If statement that can verify the current index within a Map?

I have the following TypeScript code snippet: export default class SingleNews extends React.Component<INews, {}> { public render(): React.ReactElement<INews> { return ( <> {this.props.featured ...

The jQuery function throws an Error that is not caught by the surrounding try / catch block

Recently, I've been enhancing error handling in my JavaScript objects that heavily utilize jQuery. However, I've run into an issue where throwing a new Error from within a jQuery method is not caught by the surrounding catch statement. Instead, i ...

Having difficulty utilizing the threejs and igraph R packages for network visualization

Currently, I am utilizing the r package igraph in conjunction with threejs to create visualizations of my network data. Below is an example showcasing a particular issue I have encountered. # Generating a correlation matrix: mat = cor(t(mtcars[,c(1,3:6)]) ...

Changes in props do not automatically update children via Ref

I'm working on a React component that needs to update whenever the width changes: import { useRef, useEffect, useState } from "react"; function Child({ containerWidth }) { console.log("CHILD", containerWidth); return <div&g ...

What is the process for retrieving data from multiple checkboxes with just a single click?

I am struggling with an issue where all data is being displayed when clicking on one checkbox or selecting all. I would like it so that only the specific data related to a single checkbox is shown when selected. html file <div class="row"> ...

Not currently engaged with dynamic HTML components

I'm currently working on a drag and drop feature. After the drop event occurs, I dynamically create new HTML content and try to bind an event to it using the .on method. .on ( "event", "selector", function() { However, I'm encountering an issu ...

Tips for creating animated arc fills using CSS

Can we gradually fill the color of a CSS semi-circle in a counterclockwise direction, similar to a progress bar? Here is the code for the semi-circle: https://jsfiddle.net/sonymax46/wqfovdjh/7/. .cc{ background-color: transparent; overflow: hidd ...

Disabling a property within a v-for loop depending on the component's prop

Consider this scenario: <v-btn v-for="action in actions" :key="action.icon" :disabled="action.disabled" icon @click="action.click(item.id)"> <v-icon>{{ action.icon }}</v-icon> </v-btn> ...

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

The reason why Array.indexOf struggles to identify identical-looking objects

I am facing a problem with finding objects in an array. Here is an example of what I have: var arr = new Array( {x:1, y:2}, {x:3, y:4} ); When I use the following code: arr.indexOf({x:1, y:2}); It returns -1. If I have strings or numbers or other ...