PlaneGeometry hello world

Questions
1

Hi guys,

I’m using the version r125, and I’m trying to understand how to draw a single plane.

My final goal si to create a plane with 100 segments and I want to provide the coordinates of all the vertices in order to create a curved surface like a flag.

I’ve basically took the code from here since in the comments says “create a simple square shape”, but unluckily I see only a triangle.

Here is my code:

const vv = new Float32Array([
      -1.0, -1.0, 1.0,
      1.0, -1.0, 1.0,
      1.0, 1.0, 1.0,

      1.0, 1.0, 1.0,
      -1.0, 1.0, 1.0,
      -1.0, -1.0, 1.0
    ]);

    // itemSize = 3 because there are 3 values (components) per vertex
    const geometry = new THREE.PlaneGeometry(10, 10);
    geometry.setAttribute('position', new THREE.BufferAttribute(vv, 3));

    const mm = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, wireframe: true });
    const plane = new THREE.Mesh(geometry, mm);

Here is what I see, I was expecting a square…

image
image854×668 5.44 KB

Any ideas?

Thanks!

2

Look there * discourse.threejs.hofk.de => BeginnerExample
(in the Collection of examples from discourse.threejs.org)

3

See ColorWave
2021-02-02 18.41.25

4

Don’t create a plane geometry here. Use BufferGeometry. Live example: Edit fiddle - JSFiddle - Code Playground

5

Is it an option, to create a plane with PlaneGeometry of 10x10 segments, and distort the geometry at your will? :thinking: https://jsfiddle.net/prisoner849/f3b9mezL/

6

Thank you guys,

@Mugen87 I replaced PlaneGeometry with BufferGeometry, and it quite works, the plane is created but there’s some kind of shadows on the surface

image

Here is my code

const planeGeometry = new THREE.BufferGeometry();

    planeGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.MeshPhongMaterial({ color, side: THREE.DoubleSide, opacity: 0.95, transparent: true });
    planeGeometry.computeVertexNormals();

    const mesh = new THREE.Mesh(planeGeometry, material);

@prisoner849 Yes that what I was trying to do, some years ago I used PlaneGeometry, I update three.js to the last version and I got the error:
Property ‘vertices’ does not exist on type ‘BufferGeometry’.ts(2339)
since I was using vertices property on a PlaneGeometry…

I’ll try your approach too… If you have any hints, feel free to share it!!

Thank you!