# Shadow casting on text geometry

**URL:** <https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279>\
**Category:** Questions\
**Tags:** shadows, lights\
**Created:** [January 13, 2024, 3:31pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279 "2024-01-13T15:31:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![akoGit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akogit/32/31621_2.png) [@akoGit](https://discourse.threejs.org/u/akoGit)\
**Post date:** [January 13, 2024, 3:31pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/1 "2024-01-13T15:31:05Z")

</div>

I’m trying to cast shadow on text geometry, like in this three.js [example](https://threejs.org/examples/?q=shadow#webgl_shadow_contact) , i dont understand what i’m doing wrong… can somebody help?  
[CodeSandbox demo](https://codesandbox.io/p/sandbox/three-clock-forked-lwdhwx?file=%2Fsrc%2Findex.js%3A58%2C42)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 13, 2024, 4:09pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/2 "2024-01-13T16:09:46Z")

</div>

Your scene has a bit extreme size - try keeping values of position and size around `0.1` (small items), `1.0` (1x1 metre), `10.0` (absolutely huge things.) Having objects of size 1000x1000 will force you to start unnecessarily updating camera and shadow camera near / far planes and sizing.

Your code itself is working, you can verify that by replacing your `addLights` with, for example:

```js
addLights() {
  this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  this.lightHolder = new THREE.Group();
  const topLight = new THREE.SpotLight(0xffffff, 0.4);
  topLight.position.set(0, 15, 200); // <--- Light was between text and the plane, casting light only on the plane
  topLight.castShadow = true;
  topLight.shadow.camera.near = 1; // <--- Shadow camera with near / far values of 10 / 30 could not cover much in a scene where objects are of size 100x100
  topLight.shadow.camera.far = 3000;
  topLight.shadow.mapSize = new THREE.Vector2(2048, 2048);
  this.lightHolder.add(topLight);
  const sideLight = new THREE.SpotLight(0xffffff, 0.4);
  sideLight.position.set(0, -4, 5);
  this.lightHolder.add(sideLight);
  this.scene.add(this.lightHolder);
  this.planeGeometry = new THREE.PlaneGeometry(2000, 2000);
  this.shadowPlaneMaterial = new THREE.ShadowMaterial();
  const shadowPlaneMesh = new THREE.Mesh(
    this.planeGeometry,
    this.shadowPlaneMaterial
  );
  shadowPlaneMesh.position.z = -200.0; // <--- Plane with the shadow material was facing up, perpendicularly to the camera, removing .rotation.y fixes that (although in properly set up scene the plane should indeed be rotated by -90degrees
  shadowPlaneMesh.receiveShadow = true;
  this.lightHolder.add(shadowPlaneMesh);
  this.scene.add(shadowPlaneMesh);
}

```

While it may sound a bit laborious, I’d consider pausing for a moment and rewriting the scene to fit into a smaller size (as in the note above) - since there isn’t that much in the scene, yet. In the current form, where basically everything has to be multiplied by 100, it’s a bit unmanageable in a long run 🥲

---

<div class="post-metadata">

**Author:** ![akoGit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akogit/32/31621_2.png) [@akoGit](https://discourse.threejs.org/u/akoGit)\
**Post date:** [January 13, 2024, 4:18pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/3 "2024-01-13T16:18:27Z")

</div>

thank you so much for respone! but now shadows are on the back of the text not below. i want shadows to cast like so: [codepen example](https://codepen.io/ksenia-k/pen/yLxGBwN?editors=1010)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 13, 2024, 9:59pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/4 "2024-01-13T21:59:19Z")

</div>

that’s no shadow, it’s a shader. it’s called contact shadows. you use them to get soft ground shadows, they are using a blur shader internally. you could also just light the text from above though it won’t be as soft and cute.

i struggled a lot with that one example because it’s pretty much hardcoded for its use case. i’ve made a more reusable variant for drei

> **[Bouncy watch - CodeSandbox](https://codesandbox.io/s/qyz5r?file=%2Fsrc%2FApp.js)**
>
> Custom springy controls using use-gesture and react-spring.

the code is here: [drei/src/core/ContactShadows.tsx at aa2dd0f99fcb33562eff69b57fcb51dbe1d65ff3 · pmndrs/drei · GitHub](https://github.com/pmndrs/drei/blob/aa2dd0f99fcb33562eff69b57fcb51dbe1d65ff3/src/core/ContactShadows.tsx) it would probably be easier to port to your own app than the vanilla example.

---

<div class="post-metadata">

**Author:** ![akoGit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akogit/32/31621_2.png) [@akoGit](https://discourse.threejs.org/u/akoGit)\
**Post date:** [January 13, 2024, 10:47pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/5 "2024-01-13T22:47:55Z")

</div>

yes i wanted to light from above, like in this [Codepen](https://codepen.io/ksenia-k/pen/yLxGBwN?editors=0010) example, i dont think shaders are used in this example , i cant achieve same effect still.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [January 14, 2024, 1:15am UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/6 "2024-01-14T01:15:00Z")

</div>

Your code was mostly fine. I wouldn’t worry too much about the scaling etc. With a spot light you can control shadow coverage by the placement of the light, and for a simple example like this, having a large scale probably isn’t a huge deal, since as long as it works… it works.

I scaled your text mesh down by .5

I rotated your ground plane by -90 degrees (Math.PI\*-.5) (It was vertical before!)

I moved your SpotLight a bit…

I added a geometry.dispose() before you set the new geometry, so you don’t run out of memory  
🙂

[https://wm4m2j.csb.app/](https://wm4m2j.csb.app/)

[https://codesandbox.io/p/sandbox/three-clock-forked-wm4m2j?file=%2Fsrc%2Findex.js%3A149%2C7](https://codesandbox.io/p/sandbox/three-clock-forked-wm4m2j?file=%2Fsrc%2Findex.js%3A149%2C7)

---

<div class="post-metadata">

**Author:** ![akoGit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akogit/32/31621_2.png) [@akoGit](https://discourse.threejs.org/u/akoGit)\
**Post date:** [January 14, 2024, 3:02pm UTC](https://discourse.threejs.org/t/shadow-casting-on-text-geometry/60279/7 "2024-01-14T15:02:36Z")

</div>

Thank you so much! i was banging my head around this for 2 days , couldn’t figure it out…