Lightsource/shading not working on my custom geometry

[michiel86]

On codepen I am making a Vase. Currently it is built up off hexagons.

The code:

https://codepen.io/michielschukking/pen/gbMKajE?editors=0012

The result:

https://codepen.io/michielschukking/full/gbMKajE

Next thing that is needed is adding thickness to the hexagons. It needs to go to the 3D printer.

https://codepen.io/michielschukking/pen/ByzGeKe

https://codepen.io/michielschukking/full/ByzGeKe

Now adding light would be handy or else I can’t see what I am doing on the edges of each hexagon.

The geometry was a fairly complex task so I hope it is possible.

The THREE.PointLight added to the scene doesn’t seem to do anything. Then I tried changing the material, but then the whole drawing disappears. I used MeshPhongMaterial, MeshLambertMaterial, and MeshStandardMaterial. I get a black screen with nothing on it. Maybe I did it wrong.

Would be nice if I could start working with light in my parametric design.

(Also OrbitControls, how do I add it in this coding style.)

[Oxyn]

This scene should support most native materials. But it doesn’t guarantee correct display using custom geometry (like normals missing). This is something you may solve, I didn’t check the details.

https://codepen.io/William-J-Jones/pen/azZVPZO

[michiel86]

Thank you! Adding normals? Maybe.

Isn’t there is simpler way to make my vase one with shadows having made it with BufferGeometry and vertices ?

[Oxyn]

I was short on time, now the codepen is fixed.
When you change/create geometry, you need to recompute normals so the material can display correctly. This is done with:
geometry.computeVertexNormals();

Now self shadow and received shadows work on your vase. This definitively help for visualisation with single colors

You probably better at me for procedural shapes, I cannot help with this sadly.

[michiel86]

Thank you that looks great!

[michiel86]

With the thickened out version I get weird shadows. The hexagons are sharp-edged, not some kind of pills.

Have any idea how this comes?

https://codepen.io/michielschukking/pen/ByzGeKe

Also OrbitControls not working in with the vase-with-tickness version.

[prisoner849]

@michiel86

Also OrbitControls not working in with the vase-with-tickness version.

Turn this

renderer.render( scene, camera );

into this:

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render( scene, camera );
})

[prisoner849]

Made this one with a bunch of merged cylinders (octahedrals).

Demo: https://codepen.io/prisoner849/full/jEMOopM

[michiel86]

Impressive!

This is indeed how I want it to look, now they look like pills. Can’t something with the shading be made more strict in my version so it looks more like this one?

I really need my own custom shapes to shade and look normal.

So using:

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array( [

and:

let indices = [

and:

geometry.setIndex( indices );
geometry.setAttribute( ‘position’, new THREE.BufferAttribute( vertices, 3 ) );

Of my math also the sides seem the be right:

let indices = [
// Inner Octagon
0, 1, 3,
1, 2, 3,
3, 4, 5,
3, 5, 6,
3, 6, 7,
3, 7, 0,
// Outer Octagon
0+8, 1+8, 3+8,
1+8, 2+8, 3+8,
3+8, 4+8, 5+8,
3+8, 5+8, 6+8,
3+8, 6+8, 7+8,
3+8, 7+8, 0+8,
// Sides (This seems to be fine!)
0, 0+8, 1,
0+8, 1+8, 1,
1, 1+8, 2,
1+8, 2+8, 2,
2, 2+8, 3,
2+8, 3+8, 3,
3, 3+8, 4,
3+8, 4+8, 4,
4, 4+8, 5,
4+8, 5+8, 5,
5, 5+8, 6,
5+8, 6+8, 6,
6, 6+8, 7,
6+8, 7+8, 7,
7, 7+8, 0,
7+8, 0+8, 0,
];

Just checked it a second time, don’t see any mistakes.

Again, can the lighting just work on this geometry?

[michiel86]

Noone has any idea to make the lighting good this way. To make my ‘custom-geometry’ I used the simple Three js documentation example.

[prisoner849]

When you use the material of THREE.FrontSide (by default), you’ll see, that there’s something wrong with the winding of vertices in faces (index causes this).

If I were you, I would try to build a single octahedral first, checking, that it has correct vertex winding (index) and looks correctly.

[prisoner849]

And as a base, I would use a custom geometry like this:

[michiel86]

I have done my custom geometry intelligently and maybe I’ll do it more often like this. I really need it to work.