Get world position of edge of rotated plane

Questions
, ,
1

Hi, again! I want to get position of edge of rotated plane . But I don’t know how to do it.

Code:

// I created plane
let geometry = new THREE.PlaneGeometry( 80, 80);
let material = new THREE.MeshBasicMaterial( {color: new THREE.Color('#FF0000'), side: THREE.DoubleSide} );
let plane = new THREE.Mesh( geometry, material);

//And rotated it
plane.rotateX(Math.PI / 4);

I want to get edge postion between two vertex. For example, edge between vertexes 0 and 1:

 getEdgePosition = function (v1, v2) {
        const geometry = this.geometry;
        const positionAttribute = geometry.getAttribute( 'position' );
        
        //Created vectors to save position of vertex
        const firstVertex = new THREE.Vector3();
        const secondVertex = new THREE.Vector3();

        //Got vertex position
        firstVertex.fromBufferAttribute( positionAttribute, v1);
        secondVertex.fromBufferAttribute( positionAttribute, v2);
        //Returning result
        return new THREE.Vector3(
            (firstVertex.x + secondVertex .x) / 2,
            (firstVertex.y + secondVertex .y) / 2,
            (firstVertex.z + secondVertex .z) / 2
        )
}

plane.getEdgePosition(0, 1);

It returned right result, but with rotated planes it not works…

2

Add the last sentence after the rotation

plane.updateMatrix()

Rotating the mesh doesn’t change the geometry’s position, you need to apply the mesh’s matrix to the geometry.

this.geometry.clone().applyMatrix4(this.matrix)
3

Hello! Thanks for your reply. I tried your method, but still not working.

I created codepen where you can see example. At 104 line I tried your solution but didn’t get right result

Codepen: https://codepen.io/DYDOI-NSK/pen/mdxLpoB?editors=1011

4

Have you considered attaching an object that is 80 units from center of plane that’s invisible. Then, you can just get its world position.

5

You may have misunderstood me,Is this the result you need?

image
image1733×667 34.7 KB 

let getEdgePosition = function (v1, v2) {
        const geometry = this.geometry.clone().applyMatrix4(this.matrix);
        const positionAttribute = geometry.getAttribute( 'position' );
        
        //Created vectors to save position of vertex
        const firstVertex = new THREE.Vector3();
        const secondVertex = new THREE.Vector3();

        //Got vertex position
        firstVertex.fromBufferAttribute( positionAttribute, v1);
        secondVertex.fromBufferAttribute( positionAttribute, v2);
        //Returning result
        return new THREE.Vector3(
            (firstVertex.x + secondVertex .x) / 2,
            (firstVertex.y + secondVertex .y) / 2,
            (firstVertex.z + secondVertex .z) / 2
        )
}
6

Yep, clear solution. You are awesome, thanks. Last question: Do you know any good tutorial about three.js? I reading only three.js documentation, but there are described only methods and props, and sometimes it’s not enough to solve problems like’s this

7

A great learning site from looeee.@looeee

1 Like
8

Thanks, man