# VRMLLoader destroys shadows

**URL:** <https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012>\
**Category:** Questions\
**Tags:** react, vrml-loader\
**Created:** [May 10, 2022, 2:16pm UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012 "2022-05-10T14:16:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![svdHero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/svdhero/32/24872_2.png) [@svdHero](https://discourse.threejs.org/u/svdHero)\
**Post date:** [May 10, 2022, 2:16pm UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012/1 "2022-05-10T14:16:28Z")

</div>

Hi there,

in my application I have a canvas where I want to switch between different scenes. Some of them are created by using the `VRMLLoader`. I am using functional React with TypeScript. By means of the React Hook `useEffect` each time I change the data model, the Three.js scene and renderer are disposed and a new scene and renderer is created. That works fine so far, with one exception. Somehow, when I switch from some VRML model back to another model, the scene is missing shadows or only shows distorted shadows.

I don’t understand why this is the case, since all Three.js objects are destroyed and recreated. It almost seems as if Three.js and/or the VRMLLoader has some sort of global side-effect that screws up the shadows. What am I doing wrong?

Here’s a demo:

[![Edit elastic-snow-0rtsvs](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/elastic-snow-0rtsvs?fontsize=14&hidenavigation=1&theme=dark)

To reproduce, do this:

1. Notice how the knot in the basic model has a shadow.
2. Press the “Switch” button in order to load some VRML model.
3. Press the “Switch” button again in order to load the original basic model again.
4. Notice how the knot’s shadow is gone.

This problem seems to happen only when using `VRMLLoader`. When switching between basic models without `VRMLLoader` involved, all shadows are as they should be.

I would be grateful for any help.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 12, 2022, 9:30am UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012/2 "2022-05-12T09:30:09Z")

</div>

I’ve ported your code to plain JS (without react and TS) and I can’t reproduce the issue:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/nyk7teqc/1/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Besides, there are some conceptual issues in your code that you should highly avoid:

- Create the renderer just once and reuse it.
- You have to traverse through the VRML scene and set `castShadow` and `receiveShadow` to `true` for all descendants.
- When changing to a completely different scene, always use `dispose()` on all materials, geometries and textures (not just in context of the VRML asset).
- If you remove a renderer and its canvas, stop the animation loop via `cancelAnimationFrame()`.

---

<div class="post-metadata">

**Author:** ![svdHero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/svdhero/32/24872_2.png) [@svdHero](https://discourse.threejs.org/u/svdHero)\
**Post date:** [May 17, 2022, 8:48am UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012/3 "2022-05-17T08:48:23Z")

</div>

Thank you for your reply. I have a couple of follow-up questions:

1. About reusing the renderer: I assume the renderer should have the same lifetime as the canvas-element, since I specify the canvas either through the renderer classes constructor or let the renderer create its own DOM-element.  
So how would I handle that within React where the component recreates the canvas element whenever the component’s properties change? (Is there another answer to this question but “Use Fiber”? 🙂 )  
All “Three.js with React” snippets I’ve found in this forum or via Google handle it like I do. While this doesn’t mean that this is the right way, it seems to work for other people at least.

2. I’ve added the `scene` traversing and calling `dispose()` on everything. I’ve also added the `cancelAnimationFrame()`call. Still the same issue. See code sandbox:

[![Edit suspicious-stallman-fu0c3j](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/suspicious-stallman-fu0c3j?fontsize=14&hidenavigation=1&theme=dark)

This is really strange. Maybe it is related to not reusing the renderer.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 17, 2022, 1:51pm UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012/4 "2022-05-17T13:51:23Z")

</div>

Sorry, I’m not familiar with React. The only thing I can say is that it’s not really resource efficient to remove and create renderer and its canvas/context over and over again. Resources like that should be allocated once and then reused by the app whenever possible.

---

<div class="post-metadata">

**Author:** ![svdHero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/svdhero/32/24872_2.png) [@svdHero](https://discourse.threejs.org/u/svdHero)\
**Post date:** [May 17, 2022, 7:55pm UTC](https://discourse.threejs.org/t/vrmlloader-destroys-shadows/38012/5 "2022-05-17T19:55:39Z")

</div>

Okay. Thanks for all your help and your dedication to this project.