Child mesh position

[Akbar_Bobomurodov]

Hello, I have a plane

const planeWidth = 1500; // Desired plane width
            const planeHeight = planeWidth / imageAspectRatio;

            const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
            const material = new THREE.MeshBasicMaterial({
                map: loadedTexture,
                // transparent: true,
            });

this plane includes a lot of child meshes. I need to implement zoom to object functionality. But When I try to obtain the position of the child mesh. I always get (0,0,0).

Here How did I make a child

 const planeCoordinates = entity.coords.map((coord) => {
                    const rectX = parseFloat(coord[0]);
                    const rectY = parseFloat(coord[1]);
                    const planeX = (rectX / imageWidth) * planeWidth - planeWidth / 2;
                    const planeY = -((rectY / imageHeight) * planeHeight - planeHeight / 2);
                    return [planeX, planeY];
                });

                const rectShape = new THREE.Shape();

                rectShape.moveTo(planeCoordinates[0][0], planeCoordinates[0][1]);
                for (let i = 1; i < planeCoordinates.length; i++) {
                    rectShape.lineTo(planeCoordinates[i][0], planeCoordinates[i][1]);
                }
                rectShape.lineTo(planeCoordinates[0][0], planeCoordinates[0][1]);

                // NOTE create rect mesh started

                const rectGeometry = new THREE.ShapeGeometry(rectShape);

                const rectMaterial = new THREE.MeshLambertMaterial({
                    color: 0xff0000,
                });
                // fix z-fighting issue
                rectMaterial.depthWrite = false;
                // NOTE entity mesh
                entityMesh = new THREE.Mesh(rectGeometry, rectMaterial);

plane.add(entityMesh);

my function

function zoomInTimeline(x: number, y: number, z: number, zoomOutFactor = 0) {
    const clickedEntityMesh = plane.children.find(
        (entity) => entity.userData.id === 16105 && entity.userData.type === 'stand-center',
    );

    const position = new THREE.Vector3();
    clickedEntityMesh.getWorldPosition(position);

    console.log(position);

    // const clickedEntityBoundingBox = new THREE.Box3().setFromObject(scene);
    // const clickedEntityCenter = clickedEntityBoundingBox.getCenter(new THREE.Vector3());

    gsap.timeline({ defaults: { duration: 1.5, ease: 'expo.out' } })
        .to(controls.target, { x: position?.x, y: position?.y })
        .to(camera.position, { x: position?.x, y: position?.y, z: z + zoomOutFactor }, 0)
        .to(scene.rotation, { x: 0, y: 0 }, 0);
}

[Mugen87]

@Akbar_Bobomurodov

But When I try to obtain the position of the child mesh. I always get (0,0,0).

Do you mind demonstrating this issue with a live example? three.js dev template - module - JSFiddle - Code Playground

[Akbar_Bobomurodov]

of course. link somehow, I couldn’t show rect which is in plane. But If you click window any place. you will get always. (0,0,0), but rect is not located at (0,0,0). I put console for that. you can check it. Thanks for quick response

[Mugen87]

The result is actually as expected since you never translate the plane or its children. Translating means setting a value other than (0,0,0) to the position property.

BTW: You always should use getWorldPosition() like in your initial code listing to get the position in world space for the respective 3D object.

[Akbar_Bobomurodov]

@Akbar_Bobomurodov

const position = new THREE.Vector3();

but getWorldPosition also gave the same result (0,0,0)

[Mugen87]

Yes, since all your 3D objects are positioned at the origin.

[PavelBoytchev]

I’m sorry to interfere. Here is some explanation, I hope it might be helpful:

• Snapshot A: This is how the shapes are defined now – on their intended final position. When a shape is converted to a mesh, the position of the mesh is where (0,0,0) of the shape is… and the position is fixed at (0,0,0).
• Snapshot B: Please, try this approach – create the shape centered at (0,0,0). To do this you use only the size of the shape. And then create the mesh. The mesh will have good size, but wrong position. This is OK for now.
• Snapshot C: Move the mesh to the desired position by changing the position property of the mesh (this is the blue arrow in the illustration). In this way, the mesh will appear where it is intended to be … Then you can start using its position and it will not be (0,0,0).

[Akbar_Bobomurodov]

thanks for clarification

[Akbar_Bobomurodov]

thanks for your help