How get planeBuffer attribute position after rotate him

Questions
,
1

Hi all
i want place circle in evry vertex position of planebuffer after rotate him
this the code i use

const geometryL = new THREE.PlaneBufferGeometry( 3, 2,15,20 );
const materialplaneL = new THREE.MeshBasicMaterial( {color: 0x0000ff,wireframe:true, side: THREE.DoubleSide} );

const planeL = new THREE.Mesh( geometryL, materialplaneL );
planeL.rotateY(THREE.Math.degToRad(90))
planeL.position.set(-5,1,1.5)
scene.add( planeL );
planeL.geometry.deleteAttribute( 'normal' );
planeL.geometry.deleteAttribute( 'uv' );
let VertexNumberplaneF = planeL.geometry.getAttribute( 'position' );
for(var i = 0; i < VertexNumberplaneF.count; i++)
 {
                    const circleLightGeoL = new THREE.CircleGeometry(0.03, 16 );
                    const circleLightMatL = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
                    circleLightMeshL = new THREE.Mesh( circleLightGeoL, circleLightMatL );
                    scene.add( circleLightMeshL );
                    circleLightMeshL.position.fromBufferAttribute( planeL.geometry.attributes.position, i );
                    circleLightMeshL.position.x =circleLightMeshL.position.x-5
                    circleLightMeshL.position.y =circleLightMeshL.position.y+1
                    circleLightMeshL.position.z =circleLightMeshL.position.z+1.5
                    circleLightMeshL.rotation.y= Math.PI/2
                }

but this what i have

Capture
Capture722×521 27.6 KB

many thx

2

After the above line, try it with:

circleLightMeshL.position.applyMatrix4( planeL.matrixWorld );

To make the world matrix up-to-date, add the following line before your for loop:

planeL.updateMatrixWorld();
2 Likes
3

Hi!

If it’s an option, make circles children of the plane.
planeL.add( circleLightMeshL );

3 Likes
4

i want place circle in evry vertex position of planebuffer

Another option is, to create a Group, add it to the Scene, then add plane and circles to the Group. Finally translate and rotate the whole Group, like this:

        let planeGroup = new THREE.Group();

        const geometryL = new THREE.PlaneBufferGeometry( 3, 2,15,20 );
        const materialplaneL = new THREE.MeshBasicMaterial( {color: 0x0000ff,wireframe:true, side: THREE.DoubleSide} );

        const planeL = new THREE.Mesh( geometryL, materialplaneL );
                                              
        planeGroup.add( planeL );
                                              
        planeL.geometry.deleteAttribute( 'normal' );
        planeL.geometry.deleteAttribute( 'uv' );
                                              
        let VertexNumberplaneF = planeL.geometry.getAttribute( 'position' );

        for(var i = 0; i < VertexNumberplaneF.count; i++) {
            const circleLightGeoL = new THREE.CircleGeometry(0.03, 16 );
            const circleLightMatL = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
            circleLightMeshL = new THREE.Mesh( circleLightGeoL, circleLightMatL );
            
            planeGroup.add( circleLightMeshL );
            
            circleLightMeshL.position.fromBufferAttribute( planeL.geometry.attributes.position, i );
        }
        
        planeGroup.rotateY(THREE.Math.degToRad(-45));
                                              
        planeGroup.translateX( -5 );
        planeGroup.translateY( 1 );
        planeGroup.translateZ( 1.5 );

        scene.add( planeGroup );

This is what I get:

Bildschirmfoto 2021-10-10 um 10.53.29
Bildschirmfoto 2021-10-10 um 10.53.29824×868 41.2 KB

2 Likes
5

thank you,
it was that what i missing

1 Like