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

3D website design has become more prevalent in recent years, and here is to share the process of making my first 3D website project using three.js. I was using Maya to create the POS model and render it to glb format by using Babylon.

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.)

  1. To easily animate your model, make sure your model is in the center of the grid display before export to glb file.

You can also use AxesHelper (three.js) to visualize the 3 axes of your model.

scene.add( new THREE.AxesHelper());
The left video was the model not in the center of the grid.

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.

After you’ve converted your model, import it into three.js. There are numerous tutorial videos available on Youtube that show how to use three.js to import your model. Here is one of the reference video “Create 3D Animation With Javascript Tutorial!”.

i wanted to animate my model when scrolling, so i used an effect called “scroll trigger” from GreenSock. (Youtube Turorial )

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

const o = { a: 0 };gsap.to(o, {a: 1,scrollTrigger: {trigger: ".section-a",start: "top top",end: "bottom top",// markers: true,onUpdate: (self) => {if (model) {model.rotation.y = -0.25 * 3.14 * self.progress;model.position.x = finalXposition * self.progress;model.position.y = finalYposition + 0.7 * self.progress;model.position.z = finalZposition * self.progress;}},},

After that rotate my model in section B

// 360 rotationgsap.to(o, {a: 1,scrollTrigger: {trigger: ".section-b",start: "top top",end: "bottom bottom",// markers: true,onUpdate: (self) => {if (model) {model.rotation.y = -0.25 * 3.14 - 3.14 * 2 * self.progress;}},},});

To make the model stop at section B when scrolling. Here is the simple demo .

var scrollModelTl = gsap.timeline();scrollModelTl.to(".model", {scrollTrigger: {trigger: ".section-b2",start: "top",end: "bottom",toggleActions: "play none none reset",// markers: true,},position: "absolute", top: 10, });

(*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

<divclass="section-b f-bg-white"style="height: 200vh"><div class="model-pin-section"><div class="section-b2"><div class="model"></div></div></div></div>

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

.section-b {position: relative;height: 300vh;}.model-pin-section {bottom: 0;width: 100%;position: absolute;height: 100vh;}

--

--

--

UX/UI designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Preparing a Network Design for a Company’s IT Infrastructure

Run Hydrocarbon Flow Simulator in Windows (Ubuntu 18.04) — Part I

Debouncing & Throttling

My Unorthodox placement Journey

I want to create alternatives to traditional publishers. What platform do I use?

SPEERIT wants to keep people safe but active during Covid-19

How to Setup New Relic for a Golang Service?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Minqi Cheah

Minqi Cheah

UX/UI designer

More from Medium

How to Make 3D Models: The Ultimate Guide

3D Modeling Is an Essential Tool for the Forward-Thinking eCommerce Businesses, eLearning, etc.

ThreeJS — The simplest scene you can create

Chaibuilder.com— HTML Builder for your Tailwind CSS projects

Permission-based access in Google Firestore