How to create bufferGeometry properly

Questions
,
1

Hello Guys, I’m new here and just start to learn threejs
I create a react map component that can create a buffergeometry based on array of 3D point (new THREE.PointsMaterial) inputted.
this function create buffer geometry, but when I see from top, some faces, some left and right faces and especially top face doesnt show. If it looked from bottom, all faces showed Anyone can help me?

Blockquote
var newHeight = 1;
var newVertices = ;
var twoDPositions = ;
var normalnya = ‘’;
for(let v = 0; v<titikObjek.length; v++){
var g
if(v+1 == titikObjek.length){
g=0
} else {
g= v+1
}
var verticeGeometrynya = titikObjek[v].geometry._bufferGeometry.attributes.position.array;
var verticeGeometrynyaPlusSatu = titikObjek[g].geometry._bufferGeometry.attributes.position.array;

                //calculate normal IF DOT POINTS SAME IN X AXIS THEN
                if(verticeGeometrynyaPlusSatu[0]===verticeGeometrynya[0]){
                    normalnya = [ -1,  0,  0] // IT WOULD BE LEFT OR RIGHT, I PUT IT ON RIGHT
                } else {
                    normalnya = [ 0,  0,  -1]// THE DOT POINTS CROSSING IN Z SO IT WILL BE EITHER //FRONT OR BACK I PUT IT FRONT
                }

                newVertices.push({pos: [verticeGeometrynya[0], verticeGeometrynya[1], verticeGeometrynya[2]], norm: normalnya})
                newVertices.push({pos: [verticeGeometrynyaPlusSatu[0], verticeGeometrynyaPlusSatu[1], verticeGeometrynyaPlusSatu[2]], norm: normalnya})
                newVertices.push({pos: [verticeGeometrynya[0], newHeight, verticeGeometrynya[2]], norm: normalnya})
                newVertices.push({pos: [verticeGeometrynya[0], newHeight, verticeGeometrynya[2]], norm: normalnya})
                newVertices.push({pos: [verticeGeometrynyaPlusSatu[0], verticeGeometrynyaPlusSatu[1], verticeGeometrynyaPlusSatu[2]], norm: normalnya})
                newVertices.push({pos: [verticeGeometrynyaPlusSatu[0], newHeight, verticeGeometrynyaPlusSatu[2]], norm: normalnya})

                //for TWO D
                twoDPositions.push(new THREE.Vector2(verticeGeometrynya[0], verticeGeometrynya[2]))
            }
            var holes = [];
            var angles = THREE.ShapeUtils.triangulateShape( twoDPositions, holes );

            //make a top face
            for(let r = 0; r < angles.length; r++) {
                newVertices.push({pos: [twoDPositions[angles[r][0]].x, newHeight, twoDPositions[angles[r][0]].y], norm: [ 0,  1,  0]})
                newVertices.push({pos: [twoDPositions[angles[r][1]].x, newHeight, twoDPositions[angles[r][1]].y], norm: [ 0,  1,  0]})
                newVertices.push({pos: [twoDPositions[angles[r][2]].x, newHeight, twoDPositions[angles[r][2]].y], norm: [ 0,  1,  0]})
            }

            //make a bottom face
            for(let p = 0; p < angles.length; p++) {
                newVertices.push({pos: [twoDPositions[angles[p][0]].x, 0, twoDPositions[angles[p][0]].y], norm: [ 0, -1,  0]})
                newVertices.push({pos: [twoDPositions[angles[p][1]].x, 0, twoDPositions[angles[p][1]].y], norm: [ 0, -1,  0]})
                newVertices.push({pos: [twoDPositions[angles[p][2]].x, 0, twoDPositions[angles[p][2]].y], norm: [ 0, -1,  0]})
            }

            const newPositions = [];
            const newNormals = [];
            
            for (const newVertex of newVertices) {
                newPositions.push(...newVertex.pos);
                newNormals.push(...newVertex.norm)
            }
            
            var newGeometry = new THREE.BufferGeometry();
            newGeometry.addAttribute(
            'position',
            new THREE.BufferAttribute(new Float32Array(newPositions), 3));
            newGeometry.addAttribute(
            'normal',
            new THREE.BufferAttribute(new Float32Array(newNormals), 3));
    
                // newGeometry.computeVertexNormals()
                // newGeometry.normalizeNormals()     
                // newGeometry.computeBoundingBox()       
            var newMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
            var newMesh = new THREE.Mesh( newGeometry, newMaterial );

            this.scene.add(newMesh)
2

Hi!

Shouldn’t it be norm: [0, 1, 0] as it’s data for normals?

Moreover, could you provide explanatory pictures? What you get and what the desired result.

3

hi @prisoner849, thanks you so much for answering, yeah my code is so dirty, sorry… so ill try to explain again with pictures…

BTW for the norm, I edit the first post to show you the normal I tried

So this is the workspace
Here the starting point dot(three point material), i set it x 0 y 0.
There is a dot in 0.0

starting
starting.jpg1008×602 34.7 KB

4

then with event listener keydown, arrow keys up down left right, i move the dot in the grid…
then if ‘space’ pressed, the dots become permanent in that coordinate.(create Points Material) I save it in array
after 8 dots “spaced” like this
put%20dot

if I pressed enter then it create building, I put the Points Material Array. and I took their coordinate to make vertices for the building.
for top and bottom I calculate with triangulateShape…
Building Created, it look like this, since I set camera from top
createBuilding

with orbit controls, if I move to left here it the results
left
if right

right
right.jpg1001×599 64.3 KB

But if bottom all the faces showing up except from top(cause it is view from bottom)
bottom
bottom.jpg1002×562 69.1 KB

so, my guess it is the trouble from normal and UV… but I dont know… I tried to give normals value manually, it doesnt show up either… so, whats wrong with this Createbuilding function? is there any function I missed or something?

5

Seems you simply want to extrude the shape you get from points.
You can do it with help of THREE.ExtrudeBufferGeometry().
https://jsfiddle.net/prisoner849/3xwt0yh8/

1 Like
6

@prisoner849 thank you so much for your help. u with some code lines already solve my problems :frowning: I try triangulate that points and wrote so many lines of code and still fail :frowning: but you solve it thank you sir

7

Kind of old topic, but I feel that “side: THREE.DoubleSide” may be a solution?