Add a 3D model to website by using three.js and gsap scroll trigger.

Here are some tips before exporting the model from Maya to glb format (yea…. cuz this is my first 3D website project and a lack of experience. These are the two main issues for which I spent quite a lot of time figuring out the solutions.）

2. Make sure your model was transformed from smooth mesh preview to polygons. (Modify > Convert > Smooth Mesh Preview to Polygons)
here is the example before and after converting your model from smooth mesh preview to polygons.

Here is the code to make my model move from section A to section B (*final position is the start point of the model)

After that rotate my model in section B

(*section B total length is 300vh, section B2 is 100vh, and make your model absolute to section B2 so the model will stick in section B2 after scrolling .)

Here is my html

Make section B’s position to relative, and section B2 ’s position to absolute, bottom:0（stick to bottom of 300vh) .

Related posts:

Accelerated digital transformation, powered by AI, Cloud, Big Data & IoT, is not only making factories, devices, and mobility smarter with connected machines and intelligent robots, it is also…

I watched the nurturing habits module of ‘Parenting Without Frustration’ with interest yet was a little skeptical. The cue-routine-reward system made sense in theory but wasn’t sure how practical it…