How to correclty use `Text3D` component?

stefanobartoletti commented 11 months ago

Describe the bug

I'm trying to use the Text3D component, but it does not seem to be working as expected.

I have used it as described in the docs, but the text itself does not appear on screen.

This is my source file https://github.com/stefanobartoletti/tresjs-playground/blob/main/pages/3d-text.vue

and this is the final rendered page, where the scene does appear (the yellow background is from the canvas) but the actual 3D text model is not there https://tresjs-playground.vercel.app/3d-text

Some ideas about how to fix this?

Reproduction

https://github.com/stefanobartoletti/tresjs-playground/blob/main/pages/3d-text.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

pnpm

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.

JaimeTorrealba commented 11 months ago

Hi, you're right the example, and I believe even the docs is bad. Please try to wrap the Text3D element in a component. Also double-check the path (just in case)

You can see here an example: https://lab.jaimetorrealba.com/reactivetext_html_demos And here is the code: https://github.com/JaimeTorrealba/creative-lab/blob/main/src/views/Html_demos/ReactiveText.vue

If you feel motivated, PRs are accepted fixing the docs :)

BTW there's a discussion about loading some elements like text or smoke without the Suspense component, but far now is just a discussion.

Let me know if this work for you

stefanobartoletti commented 11 months ago

Thanks, I tried wrapping Text3D in a Suspense component and now it works.

Tresjs / cientos