search

Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
1.99k stars 93 forks source link

Events not registering on dynamically added objects #763

Closed RuthySheffi closed 2 weeks ago

RuthySheffi commented 2 weeks ago

Describe the bug

Description:

I am experiencing an issue where events on dynamically added spheres are not being registered. In my setup, I have a box that, when clicked, adds a new sphere to the scene. While the initial spheres respond to click, pointer-enter, and pointer-leave events as expected, the newly added spheres do not trigger these events.

Sample Code:

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Sphere, Box, OrbitControls } from '@tresjs/cientos';

const addHotspot = () => {
  const newHotspot = reactive({
    position: [-2, 0, 0],
  });
  hotspots.push(newHotspot);
};

const hotspots = reactive([
  {
    position: [-2, 0, -2],
  },
  {
    position: [0, 0, -2],
  },
  {
    position: [2, 0, -2],
  },
]);

const grow = (event) => {
  event.object.scale.set(1.5, 1.5, 1.5);
};

const shrink = (event) => {
  event.object.scale.set(1, 1, 1);
};
</script>

<template>
  <OrbitControls />
  <TresPerspectiveCamera />
  <TresAmbientLight :args="['white', 0.5]" />
  <Box :position="[0, 0, 0]" :scale="[1, 1, 1]" @click="addHotspot">
    <TresMeshNormalMaterial />
  </Box>
  <Sphere
    :args="[0.5, 32, 32]"
    v-for="(hotspot, index) in hotspots"
    :position="hotspot.position"
    @click="console.log('click', index)"
    @pointer-enter="grow"
    @pointer-leave="shrink"
  >
    <TresMeshNormalMaterial />
  </Sphere>
</template>

Expected Behavior:

The click, pointer-enter, and pointer-leave events on the newly added spheres should function identically to those on the initial spheres, triggering the respective console logs and scaling effects.

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction-aa972s?file=src%2Fcomponents%2FTheExperience.vue,package-lock.json

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

andretchen0 commented 2 weeks ago

Hey @RuthySheffi, thanks for the issue and reproduction.

Possibly related, there seems to be an issue with events not being added to v-if'd nodes:

Reproduction

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

Expected

When visible, the on-screen mesh should log to the console when clicked.

Bug

When visible and clicked, the mesh does not log to the console.

Code

<!-- eslint-disable no-console -->
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useLoop } from '@tresjs/core';

const tOrF = shallowRef(false);

useLoop().onBeforeRender(({ elapsed: _elapsed }) => {
  tOrF.value = !!(Math.floor(_elapsed) % 2);
});
</script>

<template>
  <TresMesh v-if="tOrF" @click="console.log">
    <TresSphereGeometry />
    <TresMeshNormalMaterial />
  </TresMesh>
</template>

Note that the code above logs to console if the v-if is removed.

Meta

@garrlker

andretchen0 commented 2 weeks ago

Possibly related