How to increase shadow

Questions
, ,
1

Hi,
in my model I have some wooden bars with the following material mapped.

woodMat = new THREE.MeshPhongMaterial({
  map: texture,
  bumpMap: textureBump,
  bumpScale: 0.5,
  color: 0xffffff,
  flatShading: true,
  // emissiveIntensity: 3,
});

The geometry consists of a BufferGeometry and the material is mapped by uv coordinates.
‘castShadow’ and ‘receiveShadow’ is set to true.
Among other things I have added the following light:

spotLight2 = new THREE.SpotLight( 0xffffbb, 0.5 );
	spotLight2.position.set( 0.1, 2, 0.5);
	spotLight2.position.multiplyScalar( 100 );
	spotLight2.castShadow = true;
	spotLight2.shadow.mapSize.width = 2048;
	spotLight2.shadow.mapSize.height = 2048;
	spotLight2.shadow.camera.near = 10;
	spotLight2.shadow.camera.far = 1000;
	spotLight2.shadow.camera.fov = 40;
	spotLight2.shadow.bias = - 0.005;
  scene.add( spotLight2 );

This is the current result:

image
image1104×1002 76.3 KB

image
image653×732 131 KB

The cubes in front are only for seeing/comparing the shadows.
Behind the wall I have placed a black cube.
How can I receive more shadows between the bars? It should more look like this:
image
It tried to increase the emissiveIntensity, but this has no effect.
Would you recomment another type of material?

2

Hey,
if you want to make a smooth shadow between the bars from my side it took too much light and processing, so what if you try to bake this type of shadows ??

3

Baking a shodow must be done e.g. in Blender, right? Or can it be done during material definition?
This world for threejs is realy new for me (I just started one week before).
The material mapping needs to be flexible. Each bar should have an individual textrure and the bars will have different dimension (length, width, height).

4

change the angle, there’s just no shadow in between the bars from where the light is coming from. for cases like these i like to use a second light source that casts but with a burtally small shadow map that pixelates. this seeps into the little cracks. or use ambient occlusion, which would be a postpro effect.

5

For bars add:

castShadow:true,
receiveShadow:true
6

They are already set.

7

The light comes almost vertically from above.
It seems as if the wood texture would not receive a lot of shadow. The shadow on the cube is much darker.
image

An extra light would lighten up the surface, right? What light source do you use und what patameters do you set for it? What angle would you use?

8

Can u share full project for tests?

9

messing with lights is usually just tweaking.

0 no light
1 end result (2+3)
2 low res light creeping everywhere
3 main light (same problem you face, most surfaces look flat and lifeless)

10

I have seen the video, but I am not sure how to implement this.

11

Just an idea. For me it seems as if the normals do not point in the right direction.
Maybe this has also an effect on the shadows.
I have added the VertexNormalsHelper and get the following result.
01-02-_2022_20-53-18
Could it be possible that I did not use the right order for the vertices?
My geometry has the following structure:
image
numbers = index of vertex; number in brackets = index of triangles

arrVertices = new Float32Array(42);
arrVertices[0] = -width/2, arrVertices[1] = 0.6, arrVertices[2] = 0.0;				
arrVertices[3] = width/2, arrVertices[4] = -0.6, arrVertices[5] = 0.0; 			
arrVertices[6] = -width/2, arrVertices[7] = 0.6, arrVertices[8] = 0.0;
...

I create the triangles in the following order:

const arrTriangles = new Uint32Array([
    11,8,9, 9,10,11, // (0)
    12,7,8, 8,11,12, // (1)
    0,1,12, 12,13,0, // (2)
    1,4,7, 7,12,1, // (3)
    4,5,6, 6,7,4, // (4)
    2,3,4, 4,1,2, // (5)
  ]);

Next step is the uv mapping according to the order of the vertices:

arrUVs = new Float32Array(28);
arrUVs[0] = factorX * (0 * width + 0 * length),		arrUVs[1] = coordY + factorY * (1 * width + 0 * height); // 0
arrUVs[2] = factorX * (1 * width + 0 * length), 	arrUVs[3] = coordY + factorY * (1 * width + 0 * height); // 1
arrUVs[4] = factorX * (1 * width + 0 * length), 	arrUVs[5] = coordY + factorY * (0 * width + 0 * height); // 2
arrUVs[6] = factorX * (1 * width + 1 * length), 	arrUVs[7] = coordY + factorY * (0 * width + 0 * height); // 3
...

and finally these lines:

  bufgeoFace.setIndex(new THREE.BufferAttribute( arrTriangles, 1));
  bufgeoFace.addAttribute('position', new THREE.BufferAttribute( arrVertices, 3));
  bufgeoFace.addAttribute('uv', new THREE.BufferAttribute( arrUVs, 2));
  bufgeoFace.computeVertexNormals();
  bufgeoFace.computeBoundingBox();
  const bufgeoMesh = new THREE.Mesh(bufgeoFace, material);
  bufgeoMesh.castShadow = true;
  bufgeoMesh.receiveShadow = true;
12

maybe something like GitHub - dyarosla/shadowVolumeThreeJS: Shadow Volume / Stencil Shadows example using three.js would work better?
image

13

After a lot of research, I found the reason why I did not get a shadow.
The model was to big. I created the geometry in centimeters.
After reading this useful document I found out that meters are the units I should use.
I have scaled down my model and now I can see a shadow between the bars.
Later I will try to optimize it but for now this solves my problem.

image
image497×549 64.8 KB

Thanks for you help.

14

Thats why always need example codepen, fiddle etc.