TresDirectionalLightHelper Uncaught (in promise): Cannot read properties of undefined (reading 'matrixWorld')

[idank]

Describe the bug

Can't seem to use TresDirectionalLightHelper in the simplest way.

Reproduction

https://play.tresjs.org/#eNqdVW1P2zAQ/itW0MSmtUlaYNoyNrF2Y2MaAwHfCB9McjQGx7Zs922I/76z07QJMChro6q+l+eeO99dboMzDeaLUuFkDEES7JpMM2WJATtWhFMx+pQG1qTB51SwUkltyS0xBeVcTk/gityRKy1Lsonemw0LBzqkYkLN0mLPouzaRJnUsPmxYXukL5kdSmG15I+YMxBWGueRikwKYwlno8K64J8aTF6/ScVuVLFHrniwUCpOLeCJkN0GoykTuZx2DfsDJONAdTeTXGpMdON9/+tguOOzJfjxXsegjYLMsgkMaQmakkRJwyyTAl3OP3SIey7SgES1WzulpdihHYIp2gDdfofgEzuEREtLa0XcIYfUFuHxQaVdwNTJSAHfQZZg9ZwkVI+M8+l1SC/c6ZCtJp9G6DMpBYKCZpSTB2mvqEa1w9PckaJ7XLCMGtvF+8DStsMO5OwRno5k/fMirtv77vsfXLHGrtQPK3mqCtCrWq7NZH8wiLcGzzL5yrTrHiko/+U6l2i4Qve6i92t3yspstz23cCEBYGqOSp6Yb9d5XZf3Y/yA7gCvSp4Ha5DluX2c+EpV4OBot2oMTV4NHbO3d/ClryTikuZz8mt8ysRl4mExDiXhCia50yM6mMBLlhCenH8ygumLLfF8nyXig2qVAX0jC0hlzS7GWk5Fnk1pgnZiGMXB2Fw4D3BoBNU66RbUhVeGylwlXn4dKHADZZUAZ2suYucIg0Ka5VJoijLBfrnwNlEhwJsJFQZNc33tsN+2I9yZmzkxGidBliae8DV1noJduWB8HEYdwXMbNhbRVlo28HsFOiNomKdFJa2PkCNXAvDkjmfJnahYS1cZ7eHiO+QdvQWTNmsBr4VxgbWLnPDfK8XhzuIiKsaZmHZLvLCDsdAQ/4C4MrhKWg07OZQsjVAa1OX/Hb4LuLssgnpELFD77A1rcH31hUb3WvMTJaKcdBHyo1tu0H9W+2nl1k9hiW/rIDs5hH5tZlVlI+xWUBPsNyrq8RRBVupv53+xs5qKEuZj/nicv6hPAEj+dhxrMwGOIpIu2Hn2R74OcMtcGa+zfzaWiTVImrnCrz0vF6yy16rBBe+cN7eX8fwiSqtMtsKt5YFv/sLFQ3fhw==

Steps to reproduce

Using the Tres playground, I've added <TresDirectionalLightHelper :args="[lightRef, 5]" /> just below the TresDirectionalLight, and sets it ref property to a shallow ref. This seems to cause an error in the library:

three.module.js:52035 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'matrixWorld')
    at new Lm (three.module.js:52035:23)
    at n (tres.js:1202:14)
    at mountElement (runtime-dom.esm-browser.js:5971:21)
    at processElement (runtime-dom.esm-browser.js:5945:7)
    at patch (runtime-dom.esm-browser.js:5813:11)
    at mountChildren (runtime-dom.esm-browser.js:6057:7)
    at processFragment (runtime-dom.esm-browser.js:6239:7)
    at patch (runtime-dom.esm-browser.js:5799:9)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-dom.esm-browser.js:6440:11)
    at ReactiveEffect.run (runtime-dom.esm-browser.js:471:19)

System Info

No response

Used Package Manager

npm

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[andretchen0]

Here's a StackBlitz.

https://stackblitz.com/edit/tresjs-minimal-reproduction?file=src%2FApp.vue

<script setup lang="ts">
import { shallowRef } from 'vue';
import { DirectionalLight } from 'three';
import { TresCanvas } from '@tresjs/core';
import { OrbitControls } from '@tresjs/cientos';

const lightRef = shallowRef(new DirectionalLight());

setInterval(
  () => (lightRef.value.position.x = Math.sin(Date.now() * 0.01)),
  1000 / 60
);
</script>

<template>
  <TresCanvas window-size clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[9, 9, 9]" />
    <OrbitControls />
    <TresMesh :position="[0, 0, 0]" cast-shadow>
      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
      <TresMeshStandardMaterial />
    </TresMesh>
    <TresDirectionalLight
      ref="lightRef"
      :position="[-10, 10, 4]"
      :intensity="1.2"
      cast-shadow
    />
    <TresDirectionalLightHelper :args="[lightRef, 5]" />
  </TresCanvas>
</template>

See console. Error:

Uncaught (in promise) TypeError: "position" is read-only

[andretchen0]

See also: PlaneHelper

https://stackblitz.com/edit/tresjs-minimal-reproduction-6rkjr6?file=src%2FApp.vue

<script setup lang="ts">
import { shallowRef } from 'vue';
import { TresCanvas } from '@tresjs/core';
import { OrbitControls } from '@tresjs/cientos';

const planeRef = shallowRef();
</script>

<template>
  <TresCanvas window-size clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[9, 9, 9]" />
    <OrbitControls />
    <TresPlane ref="planeRef" />
    <TresPlaneHelper :args="[planeRef, 1, '#ffff00']" />
  </TresCanvas>
</template>

See console. Error:

Uncaught (in promise) TypeError: "position" is read-only