0.Video demonstration
three.js integrates gsap to create object animations
As a simple and easy-to-use tweening animation library, gsap has won unanimous praise from developers.
In the applet, we integrated the Three.js third-party library, which can create and load models and scenes, but animation still requires the support of the third-party library.
The following explains in detail how to integrate the gsap library through npm in the mini program (the process of integrating other third-party libraries is also the same).
1. Install Node.js
npm is a component of Node.js. We often need to use npm to install third-party libraries.
I won’t go into too much detail about the installation of Node.js here. There are many online, you can check them out on Baidu.
2. Command npm init
In the developer tools, click Terminal and create a new terminal. By default, you will enter the project root directory.
Enter the command npm init
Prompt to enter package name: ( Just give a random name here )
Then keep pressing Enter
There will be no changes to the completed project folder.
3. Install third-party packages (take gsap as an example)
We can find the desired third-party package on the npmjs website and view the installation instructions
I installed gsap here.
Enter the command npm i gsap in the terminal
After the installation is complete, it shows that 1 package has been added
At this time, you can see that a new folder node_modules has appeared in the project directory.
4. Build npm
Click Tools in Developer Tools -> Build npm. After completion, the following prompt will appear.
At this time, you can see that there is an additional miniprogram_npm folder in the project folder.
After expansion, you can see the third-party libraries we installed under this folder, which can then be referenced in other source codes.
5.Example demonstration
ThreeJS development guide and model download
