Extra-Triangle with Mesh & BufferGeometry

Questions
1

Update: My input arrays for indices and vertices (which are hard coded) are shorter than what each object is storing at run-time. . . . console.log(MeshArray[i]) and they all have extra elements.

Hello

I am creating procedurally generated object. The objects used indices and vertices. I am getting an extra triangle drawn from the models origin. Does anyone have any idea how to get rid of this extra triangle, and tell me whats going on & why this is happening?

I’m really confused, and dont know what is going on. I would LOVE help with this one.
Here is what it looks like, ignore the material. I circled the extra vertex.

iduno
iduno2609×763 29.8 KB

basically im doing

let vertices = [ 1, 2, 3, 4, ...etc];
let indices = new Uint32Array([ 1, 2, 3, 2, 3, 4, ...etc];

geometry = new THREE.BufferGeometry();
geometry.setIndex(new THREE.BufferAttribute(indicesArray, 1));
geometry.setAttribute('position', new THREE.Float32BufferAttribute(verticesArray, 3));

material = ...create material;
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
2

Welp this has been eye opening. OpenGL itself is easier than threejs. threejs is broken.

3

Without an actual example with real data it is hard to see what is going on and help you.

4

cant give the data. it does it to any object. give me like 100 vertices and the indices and ill post it. none of the y coordinates are at 0 for those higher up objects, yet there is a triangle being drawn with a vertex that y=0.0.

I just think threejs is broken. atleast buffergeometry is broken.

5

Honestly, you should help others help you, and not give them extra work that you can do.

2 Likes
6

Im helping the community by letting someone know that THREE.BufferGeometry() is broken… I know openGL, and all you have to do is create and bind your buffers, store the ID’s, give it the arrays, and give it the offsets. I know all WebGL does is call those openGL functions.

its not complicated at all.

7

The only thing openGL wants, is to know the state. Its a giant state machine. Then you literally just feed it a pointer to some numbers.

But somehow it isnt getting from A to B through threejs without something changing that array of numbers, and the offsets.

update: tried every possible code example out there, came up with my own ways, and still got jack.

8

Statements similar to yours, that something is broken in Three.js, come time to time. Usually it’s because that someone doesn’t know how the things work, or applies wrong maths, or it’s just a typo in code.

Are you sure that the data in your buffers is correct?
As you parse an obj-file, make you sure that you split a face, for example, of 4 vertices into 2 faces of 3 vertices? OBJ format allows such faces and OBJLoader solves this thing with a very simple triangulation.

3 Likes
9

triangulated, indexed, no duplicates, no quads, no ngons, no polygons. I know the obj format and pulled these manually and pasted them into a hardcoded array. no import. There exists no vertex (0, 0, 0) in the model. The models are perfectly fine except for these extra triangles.

10

Well, without providing any examples of what and how you do, you’re on your own, as only you know your code :slight_smile:

1 Like
11

man, there are 100s of examples of three.js working perfectly fine that you can check online, and then there is 1 example of it being broken that you cant show us? just admit that you have a bug somewhere, @Kamjam21xx :smiley:

3 Likes
12

here is a fiddle based on your original code @Kamjam21xx - https://jsfiddle.net/5k9mdfgb/

as you can see, it does exactly what it is supposed to, no magical extra triangles appear. you are free to modify it until they do, and show us the result.

1 Like