Modifying the geometry of a plane in Three.js

Currently working on a simple terrain editor. When the mouse is clicked, I want the selected face to move up. The intersection is functioning well, and I am attempting to adjust the geometry in this manner:

        var intersects2 = ray.intersectObjects([plane]);
        if (intersects2.length > 0) {
            var face = intersects2[0].face;
            var obj1 = intersects2[0].object;

            var geo = obj1.geometry;

            geo.vertices[face.a].z += 50;
            geo.vertices[100].z += 50;
            geo.vertices[0].z += 50;


            geo.computeVertexNormals();
            geo.computeFaceNormals();

            geo.__dirtyVertices = true;
            geo.__dirtyNormals = true;

            console.log(face.a);

        }

While the correct vertex index shows up in the console log, nothing on the plane actually moves. Any insights into why this might be happening?

The creation of the plane is as follows:

    var planegeo = new THREE.PlaneGeometry( 500, 500, 10, 10 );
    planegeo.dynamic = true;
    plane = new THREE.Mesh( planegeo, new THREE.MeshPhongMaterial( { color: 0x99ff66 } ) );
    plane.receiveShadow = true;
    scene.add( plane );

Answer №1

Upon reviewing the code provided, it appears that the syntax being used is pre R49. It could simply be a matter of updating the dirty flag code to align with the newer library version you are currently using:

geometry.verticesNeedUpdate = true;
geometry.normalsNeedUpdate = true;

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

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

Display list items in HTML based on the length of an array

In my backend, I have a user-defined array of cars. If the user selects 3 cars, the array will contain 3 elements. I would like to display specific details of the cars in HTML elements within a list. The array is based on JavaScript. Here is an example of ...

Populating the array by calculating the average values

I'm encountering an issue in my JavaScript code. I have a situation where I must fill gaps in an array with the averages of the surrounding values. Let me provide an example: Array: 1, 2, 3, ,4, 5 In this case, I would need to fill the gap with the ...

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

I'm currently tackling a challenge that requires me to obtain a specific number using a given 3D array. This array consists of 2D arrays, each containing the same number repeated x times. The parent array is sorted from largest to smallest. Here&apos ...

The querySelector function is now encountering errors due to a change in the data

Currently, I am utilizing a query selector to retrieve an input when a user selects different buttons. Initially, the buttons had options such as: 8x10 inch 12x16 inch 20x24 inch However, I made changes to the options format like so: 8" x 10" ...

Is it possible to link actions to a storage location external to a component?

Imagine having a store set up with a middleware called redux-thunk. The store is created and exported using the following code: import myOwnCreateStoreMethod from './redux/createStore'; export const store = myOwnCreateStoreMethod(); Now, you ha ...

Ascending and descending functions compared to Ext.getCmp()

I'm feeling a bit lost trying to figure out which method to use when using grep object - should I go with up(), down(), or Ext.getCmp(ID)? Personally, I find it simpler to assign an ID to the object and then retrieve it using Ext.getCmp('ID&apos ...

What is the best way to change the value of a boolean array in React?

In my component, I maintain an array of boolean values as a state. When the value is false, I need to change it to true. this.state = { checkedPos: [] } handleChange(index, reaction) { if (!this.state.checkedPos[index]) { this.state.ch ...

Ways to include scrolling specifically for one template

As a newcomer to frontend development, I have recently started learning Vue and the Quasar Framework. I am currently working on a table and trying to set a fixed table name with only the table items scrollable. <template> <q-table virt ...

What could be the reason for not just removing the pseudo-class, but instead deleting the entire CSS document altogether?

var style = document.styleSheets[1] style.deleteRule(`.block__header::after`) console.log(`.block__header::after`) What is preventing it from being removed from the CSS document? The pseudo-class is still found in the console, and when trying to dele ...

Issues with utilizing jQuery AJAX for form submissions

I am currently customizing a webpage to fit the specific requirements of a client using a template. The page contains two contact forms which are being validated and sent to a PHP file via AJAX. One of the forms is standard, while the other one has been mo ...

Why does my anchor disappear after a second when clicked to show the image?

Hi everyone, I'm having an issue with a dropdown menu that I created using ul and anchor tags. When I click on one of the options, an image is supposed to appear. However, the problem is that the image shows up for just a second and then disappears. I ...

Printing feature not functioning properly on Internet Explorer version 11

Currently, I am facing an issue with printing a document using a blob URL and iFrame. Everything works perfectly in Chrome, but unfortunately, it's not functioning properly in IE browser. I need guidance on how to successfully print a blob URL that i ...

Creating separate files for establishing DB connection and writing Node.js queries is a recommended practice for organization

Having an issue with connecting dbconnection.js and demo_api_select.js. When trying to declare a variable in demo_api_select.js, I am encountering errors like this: Error Notification Please assist me in resolving this problem. dbconnection.js: var ...

Retrieving information from the API to populate a child component in Next.js

I have been developing a header component and here's the code snippet: import style from '../../styles/header.css'; import '../../styles/globals.css'; export default function Header({data}){ const [showMe, setShowMe] = useStat ...

Attempting to move elements into an array for storage in the local storage

Is there a way to properly add elements to an array and store it in localstorage? Here's the code snippet I've been working with: const handleSelectLayouts = (layout) => { const layoutsArray = []; layoutsArray.includes(layout) ...

Using Javascript, when the command key is pressed, open the link in a new window

Currently, I am working on a Javascript function that opens links in a new tab only when the "command" key is pressed on an Apple computer. Here is what I have so far: $(document).on('click','a[data-id]',function(e){ if(e.ctrlKey|| ...

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

How can I delete an individual HTML element that does not have a class or ID?

I am currently working with a theme that cannot be altered due to automatic update requirements. The theme includes the following HTML code snippet: <div class="dropdown-menu"> <a href="#">Profile</a> | <a href="#">Logout</a> ...