NextJS + Threejs + Prismic

Hi everyone,

I am working on a project where the company need a webgl animation.

English is not my first language so apologies first if is not clear.

I will try to make the question but before i want to explain what we are using:

Nextjs: as a frontend framework.
Prismic: using slice as a headless CMS.
Threejs: for webgl animations.
GSAP: for other animations.

The company request me to make some small examples of what im capable to do with webgl and threejs, so i did this examples as a static website pushed to a ftp server and just serve this files as a regular pure html/js website, they love the animations and told me to make this animations in this new project. For this reason i started learning React Fiber, before starting learning it i just tried the animation in the project to see what happend.

With Prismic i create a new slice (so the person in charge of the content “CMS” can add or remove this animated components).

In my NextJS frontend i created the slices and the components with TS and pushed all the changes to a testing staging env.

For my surprise the animations works, just copying the code from my static website to the NextJS project with some small changes (variables and states). so this is my question:

Is normal that a threejs animation works just perfect from static regular vanilla js code copied to a nextjs project?

What are the advantages or disadvantages of using pure js and Threejs in a nextjs project?

Is really necesary to use react fiber for a react project?

What are the advantages or disadvantages of using pure js and Threejs in a nextjs project?

Probably doesn’t matter.

Is really necesary to use react fiber for a react project?

No but if you want it to behave as a react component and inter-operate with other react style code, then it might be useful to use something like react-three-fiber Poimandres

Okay thanks, I was a little worry about the behaviour of the animation, for now the project is working perfect in a staging env deployed to netlify. But i will follow your advice and make it with React Fiber.

1 Like