Tresjs / nuxt

TresJS integration for Nuxt.
https://tresjs.org/
MIT License
185 stars 3 forks source link

`onLoop` function not called in `nuxt generate` (SSG) but working in dev mode #97

Open dghez opened 1 month ago

dghez commented 1 month ago

I'm using nuxt with SSG, so running nuxt generate to build it, I noticed this thing, everything works fine in dev mode, but when i build using generate the onLoop function never get called. Attached I have the reproduction link

I'm running on

    "nuxt": "^3.11.2",
    "@tresjs/cientos": "^3.8.0",
    "@tresjs/core": "^3.8.0",
    "@tresjs/nuxt": "^2.1.1",

DEV MODE, as you can see it triggers the logs correctly, including the loop image

BUILD, the onLoop never get triggered image

Reproduction

https://stackblitz.com/edit/nuxt-starter-hsw5j9

Steps to reproduce

npm i npm run dev npm run generate

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) x64 Apple M1
    Memory: 16.41 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.6.7 - ~/Library/pnpm/pnpm
    bun: 1.0.17 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 122.1.63.169
    Chrome: 123.0.6312.107
    Safari: 17.4.1

Used Package Manager

npm

Code of Conduct

alvarosabu commented 1 month ago

As a workaround just call resume @dghez

const { onLoop, resume } = useRenderLoop();

console.log('BOX: GENERATE');

onLoop((state) => {
  if (mesh.value) {
    mesh.value.position.x = Math.sin(state.elapsed);
  }
});

resume();

https://stackblitz.com/edit/nuxt-starter-s6xuwx?file=components/Box.vue,package.json

dghez commented 1 month ago

For the lazy people, I've made an explicit composable so i'm sure I won't forget to call the resume

import { useRenderLoop } from '@tresjs/core'

export const useCustomFrame = (cb) => {
  const { onLoop, resume } = useRenderLoop()

  onLoop((state) => {
    cb(state)
  })

  resume()
}