How to fix the shadow intensity using boxgeometry

Questions
1

image

I want to have the shadow like this .but my shadow comes like this…

image

any suggestion. any help would be greatly appreciated

2

The simple “allround”-solution is using Ambient Light to modulate shadow intensity.

Another option would be to set Hemisphere Light.

The ThreeJS demo:

https://threejs.org/examples/?q=Hemi#webgl_lights_hemisphere

1 Like
3

okay, I was able to fix the shadow but in the same image you can see that light impacts the cube also. but ,in my case the shadow in appearing but cube should also get dark from behind

4

What comes to my mind:

  • only surfaces with Lambert and Phong material can receive shadows (do you use Basic material?)
  • your box mesh receiveShadow -property needs to be set to true

Code and demo (the back of box receives shadow):

5

because I’m using two properties on the cube that’s why I’m using ShaderMaterial on Boxgeometry .

So as far I’ve got no solution regarding the shadow impact on ShaderMaterial

so will it impact for that for boxgeometry also?

6

My knowledge on Shader is rudimentary, but I guess you can extract shadow map and combine with your shader. Do I get you right, you want to receive shadows on your ShaderMaterial?

Regarding example I found, looks like this:

var shaderMaterial = new THREE.ShaderMaterial ({   
  
  uniforms: THREE.UniformsUtils.merge([
     THREE.UniformsLib['shadowmap'],
     {
      floorColor: {type:'f', value: 0.3}
     }
    ]),
    
   vertexShader: [
    THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
    "void main() {",
    "  vec4 worldPosition = modelMatrix * vec4(position, 1.0);",
    "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
    THREE.ShaderChunk[ "shadowmap_vertex" ],
    "}",
    ].join('\n'),    
    fragmentShader: [
      THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
      "uniform float floorColor;",
     "void main() {",
      "  gl_FragColor = vec4 (vec3(floorColor),1.0);",
      THREE.ShaderChunk[ "shadowmap_fragment" ],
      "}",
    ].join('\n'), 
});
  box = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10),
    shaderMaterial);

Hope it helps :slight_smile:

7

That Doesnt work for me on latest three - the shaders does not compile

image
image1360×1030 57.4 KB