@tresjs/cientos Components Not Functioning Properly After Nuxt 3 Build

WangShuan commented 9 months ago

Describe the bug

After setting up a Nuxt 3 project, installing the tres.js package, and adding the @tresjs/cientos package, I noticed that certain functionalities of @tresjs/cientos components were not working as expected. To address this, I made modifications to my nuxt.config.ts file as follows:

export default defineNuxtConfig({
  modules: ["@tresjs/nuxt"],
  build: {
    transpile: ['@tresjs/cientos'],
  },
})

During the development process, everything worked smoothly.

However, upon executing the npm run build command, I observed that the auto-rotate feature of OrbitControls, MouseParallax component, Levioso component, animations within useGLTF, and the Html component were no longer functioning. Importantly, there were no error messages or warnings in the browser console.

I have attempted to modify the project by setting ssr: false and removing any @tresjs/cientos-related configurations from nuxt.config.ts before recompiling. However, the issue persists regardless of whether I use npm run generate or npm run build.

I kindly request assistance in resolving this issue. Your guidance on how to address or workaround this problem would be greatly appreciated.

Thank you for your time and attention to this matter.

Reproduction

https://github.com/WangShuan/nuxt-tres

Steps to reproduce

Run the following commands:

git clone https://github.com/WangShuan/nuxt-tres
cd nuxt-tres
npm i
npm run dev

Open http://localhost:3000/ in your browser and observe the results.
Terminate the development server (Ctrl+C) and build the project by npm run build
Run the production build by node .output/server/index.mjs
Open http://localhost:3000/ in your browser and observe the discrepancy in functionality compared to the development build.

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.

zhangyijie0214 commented 9 months ago

No issues were found; the model animations and self-rotation are all normal in both the build and generated versions.

WangShuan commented 9 months ago

@zhangyijie0214 Hi, Thank you for your response.

Up until today, I've been continuously trying, and the issue persists on my computer.

The reproduction steps are as described above:

Clone my own repository using git clone. Run npm i. Execute npm run dev. Upon opening the screen, I can see HTML components on the door and floor. However, when I switch to npm run build and then run node .output/server/index.mjs, although the HTML structure generates tags, the components on the door and floor do not display correctly. Additionally, when moving the rabbit model using the W/S/A/D keys, the glTF animation does not appear as it does in the dev environment. I'm puzzled as to why you didn't encounter any issues.

I'm using a MacBook Air with the M1 chip.

zhangyijie0214 commented 9 months ago

@WangShuan My computer is a Mac Pro M1. The version of Node is 19.6.0. I'll give you a zip with node_modules to try and see, which also contains the built files. I suspect there might be some issues with your environment. https://drive.google.com/file/d/1CuXHoye32LpNRM8F93S8lP0WMPZiroD2/view?usp=sharing

WangShuan commented 8 months ago

@zhangyijie0214 Hi, Thank you very much! I update my node to v21.5.0 then all issue is gone now! (before update, my node is v18.18.1)

Tresjs / cientos