Updating Mesh position is not updating its own geometry

Questions
, ,
6

And… here we have an instance where…, trying to give less information in order to be more focus on what you need is actually counter productive, because it may give the wrong intention on what someone needs.

I ll try to explain actually what I am doing.
Performance is actually not a bit issue for what i need, unless is really start to bee tooo laggy. Also may not have close to 20k vertices.

What I’m trying to do is a simple editor to manipulate plane geometry. I do have few

Imports

import * as THREE from 'three';

import {TransformControls} from "three/examples/jsm/controls/TransformControls.js";
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";

Then assume that I have scene, renderer and all that good stuff. cool now for what i’m doing.
I really copy three.js webgl - transform controls and using TransformControls (which works amazingly I have to say, is a sharm :wink: )

function mergePlanes() {
        const width = 10;
        const length = 10;
        const geometry = new THREE.PlaneGeometry(width, length, 2, 2);

        const randomColors = getRandomColor();

        const planesGeometries = [];
        const planeMeshes = [];
        const planeSectionGeometryMapping = {};
        const columns = 3;
        const rows = 3;
        for (let column = 0; column < columns; column++) {
            const gridPositionX = (width / 2) + (width * column);

            for (let row = 0; row < rows; row++) {
                const gridPositionZ = (length / 2) + (length * row);

                // Create Each Separate Geometry
                let planeSectionGeometry = geometry.clone();
                planeSectionGeometry.rotateX(-Math.PI / 2);
                planeSectionGeometry.translate(gridPositionX, 0, gridPositionZ);
                planesGeometries.push(planeSectionGeometry);

                // Create Separate Mesh
                const color = randomColors("green");
                const plane = new THREE.Mesh(geometry,
                    new THREE.MeshStandardMaterial({
                        color: color,
                        side: THREE.DoubleSide,
                        wireframe: true,
                    })
                );
                plane.rotateX(-Math.PI / 2);
                plane.receiveShadow = true;
                plane.castShadow = false;
                plane.position.set(gridPositionX, 0, gridPositionZ);

                scene.add(plane);
                planeMeshes.push(plane);
                planeSectionGeometryMapping[plane.id] = planeSectionGeometry;

            }
        }

        const useGroups = false;
        const geometryMerged = BufferGeometryUtils.mergeGeometries(planesGeometries, useGroups);
        if (geometryMerged === null) {
            alert("Could not merge plane!!!");
            return;
        }
        geometryMerged.computeBoundingSphere();
        const planeMerged = new THREE.Mesh(
            geometryMerged,
            new THREE.MeshStandardMaterial({
                color: "green",
                side: THREE.DoubleSide,
                wireframe: false,
            })
        );

        scene.add(planeMerged);

        window.geometryMerged = geometryMerged;

        /// Add controls
        const object = planeMeshes[0];  // Here i'm giving the first plane.. is not really important , i'm only playing around
        const matrixBase = new THREE.Matrix4();
        const transformControls = new TransformControls(camera, renderer.domElement);
        transformControls.addEventListener('dragging-changed', function (event) {
            controls.enabled = !event.value;

            // Here is where i 'm stuck.
            // this event will be called once you transform the mesh position. This works fine

            // I want to:
            // Get somehow the current world position of the mesh.position
            // And apply to the geometry of the plane
            // re-build the plane with merged geometry..

            // get the corresponding 'geometry' buffer
            const planeSectionGeometry = planeSectionGeometryMapping[object.id];


            // here.. i really dont know what i am doing.. i honestly just trying random stuff :D
            matrixBase.setPosition(object.position.x, object.position.y, object.position.z)
            // here.. .goes to a black hole..
            planeSectionGeometry.translate(matrixBase.elements[12], matrixBase.elements[13], matrixBase.elements[14]);

            // Rebuild main plane with Merged geometries
            let geometryMergedNew = BufferGeometryUtils.mergeGeometries(planesGeometries, useGroups);
            geometryMerged.computeBoundingSphere();
            planeMerged.geometry.copy(geometryMergedNew);

        });

        transformControls.attach(object);
        scene.add(transformControls);
    }

I’m stuck on the dragging-changed event listener.
Now, If is not clear in the code this is what I’m doing

  • Creating a big plane devided in ‘smaller’ plane in sections.
  • each smaller section has an actual mesh, and a ‘separate’ autonomous geometry.
  • An object maps the mesh ids with its corresponding geometry. (planeSectionGeometryMapping)
  • Finally we are merging all geometry to create a bigger plane… thanks to BufferGeometryUtils.mergeGeometries

I am then attaching to one mesh, the TransformControls so that I can move it freely.
But once i do this i want to move the geometry that is mapped with in same position
Then rebuild the big plane.

So i am stuff on the part where i need to move the geometry into the same position of the mesh.
Why? well longer storry. it doesnt matter i think because i think that overall, is a good question and could be usefull for other things. I am a noob and is a learnig tool.

image
image1046×688 36.7 KB

Again, not important soo much performance, is a tool and wont be use by ‘end user’ by a ‘pseudo’ editor.