Component of vue3 how insert to the scene of threejs?

Questions
1

Description

I had a scene of three.js and a component of vue3. I wanna make the component insert into the scene by CSS2DObject or CSS3DObject, but they just support the HTMLElement type。
截屏2023-02-25 19 01 27
My component is dynamic because I need data from backend.

Can I use CSS2DObject or CSS3DObject to make a component of vue3 become an object supported by threejs?

Have other methods come true to my idea?

2

You need to use the ref attribute to create a reference to the child component inside the parent’s template. Also to make sure the child component is mounted you need to call initScene inside the onMounted lifecycle hook.

CSS2DObject and CSS3DObject take an HTMLElement, in your code you are giving it the child component it self, to get the root HTMLElement of the child component use the $el property of the child ref like so componentRef.value!.$el. Always in the onMounted lifecycle hook.

Parent template:

<template>
  <div>
    ...
    <test-com ref="componentRef" />
    ...
  </div>
</template>

Then use the ref inside the parent’s script like so:

<scirpt setup lang="ts">
// ...
const componentRef = ref(null);

initScene(hdr?: string) {
   // ...
   const css2DObject = new CSS2DObject(componentRef.value!.$el);
   // ....
}

// ...
onMounted(() => {
   initScene();
})
</scirpt>