0.视频演示

three.js集成gsap创建物体动画

gsap作为简单易用的补间动画库，获得开发者一致好评。

在小程序中，我们集成了Three.js第三方库，可以创建和加载模型及场景，但是做动画还是需要第三方库的支持。

下面详细说明如何在小程序中通过npm集成gsap库（集成其他第三方库过程也都是一样的）。

1.安装Node.js

npm作为Node.js的一个组件，我们很多时候需要用npm来安装第三方库。

这里对Node.js的安装不做过多赘述，网上有很多，可以百度查看一下。

2.指令 npm init

在开发者工具中，点击终端，新建终端，这时默认会进入项目根目录。

输入指令 npm init

提示输入 package name ：(这里随便起一个名字即可)

然后一直回车

完成后的项目文件夹还不会有什么变化。

3.安装第三方包（以gsap为例）

我们可以在npmjs网站中找到想要的第三方包，并查看安装指令

我这里安装gsap。

在终端中输入指令 npm i gsap

安装完成后，显示添加了 1 个 package

这时可以看到项目目录下已经出现了一个新的文件夹 node_modules

4.构建npm

点击开发者工具中的工具 -> 构建npm 完成后会出现如下提示

这时，可以看到项目文件夹中多出了一个miniprogram_npm文件夹

展开后可以看到该文件夹下我们安装的第三方库，这时就可以在其他源码中引用了。

5.实例演示

ThreeJS开发指南及模型下载

小程序集成Three.js，使用npm安装gsap动画库相关推荐

支付宝小程序集成MQTT
支付宝小程序集成MQTT 1. 前言由于支付宝只支持websocket连接,在尝试了很多npm安装mqtt亦或是使用paho-mqtt.js.重新编译过后的mqtt.js多方无果后,最终决定自己 ...
android集成友盟u app,友盟U-Mini小程序集成指南
适用范围该文档适用于友盟+微信小程序统计SDK 2.3.2 及以上版本. 微信小程序统计SDK快速集成 1. 注册友盟+账号登录友盟+官网,按照引导注册友盟+账号特别提醒:我们建议开发者在注册账 ...
微信小程序集成jenkins自动打码
微信小程序集成jenkins自动打码背景一.miniprogram-ci工具概述详细介绍见官网二.工具准备内容三.注意事项四.开始安装miniprogram-ci 运行CI命令出现以 ...
SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成
今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4 ...
微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
小程序使用node.js开发后台接口
目录灵感寻找操作步骤 1. 准备工作 2. 使用Express生成项目 3. 创建Router级别路由 4. 创建路由处理函数模块 5. 创建连接数据库的模块 6. 启动服务器 7. 小程序里面 ...
小程序集成vant组件
1.在原目录下新建一个文件夹 miniprogram 2.在此目录下打开 cmd命令界面 3.npm init(中间运行停止一律回车)(首先确保你的电脑安装了node.js和配置好环境变量) 4.np ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
小程序集成网易云通信群聊功能Demo发布
前端代码是可以直接使用的,获取后端代码加微信13439975582 功能实现说明: 1.小程序生命周期完美整合 2.消息小红点,群聊小红点代码实现都实现了 3.历史信息回放 4.小程序帐号集成代码都 ...

小程序集成Three.js，使用npm安装gsap动画库