Modify vertex-positions of Plane?

[matthoz]

Hello, I'm new to Three.js and started playing around with the demos. I've tried to modify the positions of my plane like this:

var oGeo = new THREE.PlaneGeometry( 1, 1, 1, 1 );

oGeo.vertices[0].position.z =  -0.5;
oGeo.vertices[0].position.y =  0.2;

That worked for the positioning, but I think my light won't get applied on this plane like it should. There has to be a proper way doing this. Can you help me, please?

What I'm actually trying to do is a tilemap with 16x16 planes. I want to be able to modify the y-position of every plane dynamically.

So do you encounter a problem with lighting or with modifying the position of (sub)-planes? Do you have working code?

[matthoz]

Hi, thanks for your reply. I've just realized, that I didn't modify the geometry after the first scene. It was already modified before the first scene was rendered. I just wanted to post my entire code and saw that this won't work like I wrote in my first posting.

Is there a way to modify the vertex-positions of my plane and recalculate the normal-positions somehow? I think the buffers have to be set again after doing this.

You might use the .dirty flag that when set to true will make Three.js recalculate the normals? If that flag is even still around :)

[matthoz]

Mh, I've tried it that way:

this.oGeo = new THREE.PlaneGeometry( 1, 1, 1, 1 );
this.oGeo.dynamic = true;
this.oGeo.__dirtyVertices = true;
this.oGeo.__dirtyNormals = true;

When I call this, after the first frame:

this.oGeo.vertices[0].position.z =  -1.0;
this.oGeo.vertices[0].position.y =  1.0;
this.oGeo.vertices[0].position.x =  0.0;

There are no changes :/

Edit:

I've set the boolean dirty-vars directly after modifying the plane and that worked. But the lightning seems to be the same like before (Plane was flat and now one corner is clipped down). The Plane is rotating so that I can see light affecting. Do I have to recalculate the normals by my own or is there some nifty method included? :D

As far as I remember, you need to set dirtyVertices right after you set the vertices manually?

[matthoz]

I did (I edited my previous post) and it worked, but the light is definitely not updated. Do I have to recalculate the normals by my own or is there some nifty method included? :D

Did you try to also set
this.oGeo.__dirtyNormals = true; right after you updated the vertices?

[matthoz]

Yes I did. The code for changing the vertices of that plane:

this.oGeo.vertices[0].position.x =  0.0;
this.oGeo.vertices[0].position.y =  -0.8;
this.oGeo.vertices[0].position.z =  -1.0;

this.oGeo.vertices[1].position.x =  1.0;
this.oGeo.vertices[1].position.y =  -0.8;
this.oGeo.vertices[1].position.z =  -1.0;
this.oGeo.__dirtyVertices = true;
this.oGeo.__dirtyNormals = true;

But as I wrote, I did not recalculate the normals. Should three.js do this automatically? Should I post the entire code? :S

[matthoz]

I've added those two lines:

this.oGeo.computeVertexNormals();
this.oGeo.computeFaceNormals();
//...(old)
this.oGeo.__dirtyVertices = true;
this.oGeo.__dirtyNormals = true;

Now the light seems to be correct. Now I can realize my real-time-modification of those planes. But it really is a very dirty solution, isn't it? Is this the only way to realize real-time modification of Objects? I know that it is possible to do this directly on the shader, but for the start, this is to high for me. Any other hints?

Btw. Thank you very much fabricasapiens

I have only touched Three.js again very recently, so I'm afraid these were all the hints I could give... :-) Great you figured it out! Made me learn something again as well... And maybe some-one else could give you another hint...

[chandlerprall]

After changing vertice positions you must recalculate the normals:

oGeo.computeFaceNormals();
oGeo.computeVertexNormals();
oGeo.__dirtyNormals = true;

[chandlerprall]

Ugh, I'm on my phone, not computer, and missed @matthoz last post. Yes, that is the correct way to do it :)

If we recalculate the normals and vertices, what does __dirtyNormals = true; do?

[chandlerprall]

The WebGLRenderer caches some geometry attributes such as vertice positions, normals, tangents, etc (there are seven I believe) - if you modify one of these then you must tell the renderer that it needs to update its cache by marking the __dirty* flag as true.

Sure, but doing both

oGeo.computeFaceNormals();
oGeo.computeVertexNormals();

and

oGeo.__dirtyNormals = true;

seems redundant. How are these exclusive?