PlaneGeometry hello world

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…

Any ideas?

Thanks!

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

See ColorWave

Don’t create a plane geometry here. Use `BufferGeometry`. Live example: https://jsfiddle.net/0cwu5q61/

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

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

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!