CODEWITHSUNDEEP
javascriptthree.jswebgl
Jack Franzen
Jack Franzen

Reputation: 778

Three JS No Visual Update After Manually Editing Geometry

So I have a Geometry (the scope of this code is THREE.Geometry.prototype) and I am dynamically editing. newData is an object of { faces: [array of face Indexes], vertices: [array of vertice indexes]}. (these arrays maintain the length of the origin face and vertices arrays length and hold the form [null, null, null, "4", "5", null, null... ])

Using these arrays, I strip through all the faces and vertices and apply them to 1 of 2 new arrays, effectively splitting all the data into 2 groups. I also update the pointers on the faces!

In the end I know I've updated the geometry and it is correct, but the changes I make aren't getting displayed. I've tried .elementsNeedUpdate which causes and error. (no property 'a' of undefined in InitWebGlObjects... I looked there, couldn't see a reference to a)

I've tried vertices need update, it does nothing.

I've also tried updateCentroids in combination with the previous tool. It does nothing.

I've heard of not being able to resize the buffer. What is the buffer and the length of the buffer? The amount of verticies I'm giving to a model?

I've seen "You can emulate resizing by pre-allocating larger buffer and then keeping unneeded vertices collapsed / hidden." It sounds like that may be what I'm doing? How can I collapse/ hide a vertice? I haven't seen any references to that.

Thanks for your time! 

        var oldVertices = this.vertices
        var oldFaces = this.faces;

        var newVertices = []
        var newFaces = [];

        var verticeChanges = [];

        this.vertices = [];
        this.faces = [];        


        for(var i in oldVertices){
            var curAr = ((newData.vertices[i]) ? (newVertices):(this.vertices));
            curAr.push(oldVertices[i]);
            verticeChanges[i] = curAr.length-1;
        }

        for(var i in oldFaces){
            var curAr = ((newData.faces[i]) ? (newFaces):(this.faces));
            oldFaces[i].a = verticeChanges[oldFaces[i].a];
            oldFaces[i].b = verticeChanges[oldFaces[i].b];
            oldFaces[i].c = verticeChanges[oldFaces[i].c];
        }
        console.log('Vertices Cut from', oldVertices.length, "to:", newVertices.length, 'and', this.vertices.length);
        console.log('Faces Cut from', oldFaces.length, "to:", newFaces.length,  'and', this.faces.length);

Upvotes: 7

Views: 1407

Answers (2)

jncraton
jncraton

Reputation: 9132

I recently ran into this problem myself. I found that if I'm adding vertices and faces to the geometry, I need to set this.groupsNeedUpdate = true in order to tell the renderer to update it's internal buffers.

Upvotes: 1

dh2
dh2

Reputation: 1

Maybe connected to this point from this tutorial:

"I just wanted to quickly point out a quick gotcha for Three.js, which is that if you modify, for example, the vertices of a mesh, you will notice in your render loop that nothing changes. Why? Well because Three.js (as far as I can tell) caches the data for a mesh as something of an optimisation. What you actually need to do is to flag to Three.js that something has changed so it can recalculate whatever it needs to. You do this with the following:

// set the geometry to dynamic so that it allow updates

sphere.geometry.dynamic = true;

// changes to the vertices

sphere.geometry.__dirtyVertices = true;

// changes to the normals

sphere.geometry.__dirtyNormals = true;"

Upvotes: 0

Related Questions