Use THREE.BufferGeometry() and THREE.MeshStandardMaterial create mesh ,abnormal visual effects

Questions
1

I create 2 boxes with different methed, create box1 in THREE.BoxGeometry(),create box2 in THREE.BufferGeometry(),I gave them the same material,THREE.MeshStandardMaterial.but the final effect presented, they look very different.
The code:

let color=new THREE.Color(1,1,1);
const material = new THREE.MeshStandardMaterial({ color: color,metalness: 1.0,roughness: 0.25 });
let boxgeom = new THREE.BoxGeometry(l, w, w)
box = new THREE.Mesh(boxgeom, material);
const vertices = [
-1, -1, 1,   // 0
1, -1, 1,    // 1
1, 1, 1,     // 2
-1, 1, 1,    // 3
-1, -1, -1,  // 4
1, -1, -1,   // 5
1, 1, -1,    // 6
-1, 1, -1    // 7
];
const indices2 = [
0, 1, 2,
2, 3, 0,
5, 4, 7,
7, 6, 5,
4, 0, 3,
3, 7, 4,
1, 5, 6,
6, 2, 1,
3, 2, 6,
6, 7, 3,
4, 5, 1,
1, 0, 4
];

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices2), 1));
geometry.computeVertexNormals();
const mesh2 = new THREE.Mesh(geometry, material);

The visual effect is as follows:

image
image1031×721 34.7 KB

2

You can’t compute proper normals (and texture coordinates) if the corner vertices are shared across different sides of the cube. I suggest you have a closer look how BoxGeometry is implemented.

3

It happens to me too, but I don’t know how it happens，But most of the time it’s normal
image
image

4

mugen87 give the valuable answer,with BufferGeometry function ,you should independently handle each plane,every point belonging to only one plane, and must give every point a normal vector which perpendicular to the plane where the point is located

2 Likes
5

ok.I`ll have a try