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

已于 2024-01-11 10:28:39 修改
阅读量3.5k 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序 动画
于 2022-12-28 16:19:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39318421/article/details/128469803
版权

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.3D模型下载及ThreeJS框架演示

3D模型素材库

Ltanke
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three-npm:为了能够安装three.js的开发版本
05-14
three.js JavaScript 3D库 该项目的目的是创建一个轻量级的3D库，其复杂度非常低，换句话说，就是傻瓜。 该库提供<canvas>，<svg>，CSS3D和WebGL渲染器。 --- 用法 下载并将其包含在您的html中。 另外，请参阅。 < script src =" js/three.min.js " > </ script > 此代码创建一个场景，一个照相机和一个几何立方体，并将该立方体添加到场景中。 然后，它为场景和相机创建一个<canvas>渲染器，并将该视口添加到document.body元素中。 最后，它会为摄像机的场景内的立方体设置动画。 < script > var scene , camera , renderer ; var geometry , material , mesh ; init ( ) ; animate ( ) ; fu
微信小程序使用Animate.css动画库
qq_61122628的博客
10-27 4372
在小程序中，我们添加适当的动画样式，不仅会让页面更加炫酷，还会提高用户的体验效果。文件中写入 @import './utils/animate.wxss' 即可：如果放在其他位置，自己改下路径就OK的。安装成功后：会有个--> node_modules 文件夹，(二、修改animate.css文件后缀改为wxss。包名的话，可能是微信开发者工具没有加载出来，可以。一、小程序中安装Animate.css。可以查看我们安装库的版本是多少，如下。animate.wxss 中的。好了，到这就结束了，
Three.js--》Gsap动画库基本使用与原理
ztK63LrD的博客
05-01 1882
GSAP的全名是GreenSock Animation Platform，是一个从flash时代一直发展到今天的专业动画库，今天将其与three.js进行结合，看看能够创作出怎样的效果，首先我们先要理解动画渲染循环的原理：three.js可以借助HTML5的API请求动画帧。通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS)，所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。
【vue3】GSAP在vue中的使用
CNSamRol的博客
01-22 958
第一行是创建一个timeline,这是gsap中一个强大的排序工具，易于把一套动画作为一个整体进行控制并且能精确管理时间。是挨个运行的，就是说第一个动画运行完第二个才开始运行，当然你可以设置某个动画提前运行，defaults是默认属性，ease是。这里用的是选项式，在methods属性中创建一个方法用来写gsap的动画。最终位置，就是说你要填的是元素最终的样式。下面几行就是写gasp的动画，to()方法的意思是，导入GSAP，如果需要导入gsap的插件可以。，duration是每个动画的过渡时间。
小程序开发笔记：安装 Node.js，使用 npm 引入 Vant Weapp（Vant UI）组件
01-03
刚开始入门小程序开发，踩过不少坑，稍微总结一下。 Vant UI 是轻量、可靠的小程序 UI 组件库，可以方便我们快速制作出美观的小程序界面。 Vent Weapp 官方网站链接在此 1、下载 Node.js 我是使用 npm 命令来引入这个库，Node Package Manager 是 Node 包管理工具，方便大家导入各类 JavaScript 开源包（运行在 Node.js 上），Node.js 是一个 JavaScript 运行环境。 首先得先下载 Node.js ，官网链接 下载安装完成后，打开 cmd 上面输入 node -v 和 npm -v ，如果显示出版本，就证明安装成功
vue.js中npm安装教程图解
01-19
首先理清nodejs和npm的关系： node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。 包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。 引用大神的总结: 其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm
1.GSAP（专业的Web/JavaScript动画库）
weixin_45583489的博客
10-21 3699
GSAP（专业的Web/JavaScript动画库） 这是第一篇博客，文章内容是关于GSAP动画库的使用，编写于2020年10月21日17时09分（v1.0.0）。 文章目录GSAP（专业的Web/JavaScript动画库）前言一、引入1、下载文件包2、CDN3、npm二、TweenLite的基本动画值动画有视觉效果的css动画延迟、缓动及动画事件相对值其他动画方法动画保存及控制选择器三、TimelineLite的动画管理时间轴调整放置位置时间轴控制相同动画的简便方法四、TimelineMax和Twee
gsap学习笔记
关注前端，关注原创
11-10 1706
1.gsap时间轴 var tl = gsap.timeline(); //调用时间轴对象 //#green为动画操作对象，第二个参数{}为动画效果，addLabel定义一个时间轴上的节点， //后面的to方法基于这个节点做动画 tl.to("#green", {x:750, duration:1}) .addLabel("blueGreenSpin", "+=1") .to("#blue", {x:750, rotation:360, duration:2}, "blueGreenSpin")
npm配置three.js
weixin_58320459的博客
12-07 3363
基于there.js的node安装，以及parcel打包工具
GSAP动画库的基本使用
weixin_52017993的博客
10-18 352
GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……GSAP 的 ScrollTrigger 插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。gsap.to()这个api里面有三个参数可以写，gsap.to("你的目标target", { 你所要做出的动作}, "提前时间或滞后时间")。gsap.to()其实就是将你所要操作的元素到你所指定的位置。
如何在微信小程序里使用Lottie动画库
qq_31699019的博客
03-17 3616
先看效果图： 前言： 微信小程序的lottie动画库是按照lottie-web动画库改造而来。参考lottie-web：https://github.com/airbnb/lottie-web，以及官方文档：http://airbnb.io/lottie/#/ 目前我们要用到的是http://airbnb.io/lottie/#/web 调用lottie.loadAnimation（）启动动画。它采用以下形式将对象作为唯一参数： animationData：具有导出的动画数据的对象。 path：动画对象
gsap_demo:Vue 中使用 GSAP（专业的 web 动画库，包含：TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js）
05-19
gsap_demo GSAP（GreenSock Animation Platform），专业的 web 动画库，github地址： 官方地址： github 地址： 比较好的介绍文章： 。 A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report For a detailed explanation on how things work, c
maptalks.three:要使用three.js进行渲染的maptalks图层
04-30
maptalks.three 要使用THREE.js渲染的maptalks图层 例子 。 安装 使用npm npm install maptalks.three ： npm install maptalks.three 。 从下载。 使用unpkg CDN： https://unpkg.com/maptalks.three/dist/maptalks.three.min.js ://unpkg.com/maptalks.three/dist/maptalks.three.min.js 从<= v0.5.x迁移到v0.6.0 重新实现了locateCamera，与地图的projMatrix和viewMatrix同步。 模型的z位置从v0.5.0开始反转。 因此，如果您使用v0.5.x渲染模型，则需要更新旋转。 对于3 <= 0.94，材料的侧面需要设置为THREE.BackSid
movy.js是基于three.js和gsap的易于使用的动画引擎。-JavaScript开发
05-26
movy.js是基于three.js和gsap的易于使用的动画引擎。 movy.js是基于three.js和gsap的易于使用的动画引擎。 入门假设您已经在计算机上安装了node.js，则可以通过以下方式简单地安装movy.js：npm i -g movy要运行movy.js，请在终端中输入以下命令：movy将显示示例动画列表。在示例文件夹中。 要创建自己的动画，可以启动一个新的javascript文件。 以下是movy.js的一个简单的hello-world程序。 从“电影”中以*形式导入*； const t = mo。
threejs-miniprogram:微信小程序改编版Three.js
04-27
threejs-miniprogram Three.js 小程序 WebGL 的适配版本。 使用 可参考 example 目录下的示例项目或参照以下流程： 通过 npm 安装 npm install --save threejs-miniprogram 安装完成之后在微信开发者工具中点击构建 npm。 导入小程序适配版本的 Three.js import {createScopedThreejs} from 'threejs-miniprogram' Page({ onReady() { wx.createSelectorQuery() .select('#webgl') .node() .exec((res) => { const canvas = res[0].node // 创建一个与 canvas 绑定
three-csg-ts:与THREE.js一起使用的CSG库
05-02
三个csg-ts 带有Typescript支持的CSG（本几何）库。 这是的打字稿重写。 概念 CSG是用于根据两个输入几何图形生成新几何图形的技术的名称。 在3d建模包中，CSG有时称为“布尔”运算符。 在内部，它使用称为BSP（二进制空间分区）树的结构来执行这些操作。 支持的操作为.subtract，.union和.intersect。 通过使用这3个操作的不同组合，并更改输入模型的顺序，可以构造输入模型的任何组合。 安装 用npm安装npm i -save three-csg-ts 用纱安装yarn add three-csg-ts 用法示例 import * as THREE from 'three'; import { CSG } from 'three-csg-ts'; // Make 2 box meshes.. const meshA = new THREE.
如何搭建线下陪玩系统(本地伴游、多玩圈子)APP小程序H5多端前后端源码交付，支持二开！
最新发布
xiaox18duoke1209的博客
04-19 199
当然在陪玩系统源码的音视频播放过程中可能遇到的问题远不止于此，像音画不同步、首帧时间长、播放失败等都有可能会遇到，在遇到这些问题时不要慌，对流媒体传输的各个环节进行分析，找到问题所在，通过现有技术实现对应问题的优化。4、针对播放卡顿过于严重的用户或在高并发场景下时，可以在陪玩系统源码后台下发消息，通过强制的形式让陪玩系统源码的客户端降低码率，减少卡顿的情况。2、对陪玩系统源码中音视频数据的下载链路进行优化，通过选择更近更优质的CDN边缘节点来减少音视频播放过程中的卡顿情况。三、延迟大的优化方法。
小程序数据绑定（第二部分）
licun110的博客
04-13 933
页面的.vxml文件和html文件一致，跟vue中用法一样，用{{ }} 引用js数据中的data数据。5 在页面中如果属性想表达布尔值，一定要加{{}}，当然也可以直接使用变量{{布尔值变量}}1、作为一个真正的程序员，首先应该尊重编程，热爱你所写下的程序，他是你的伙伴，而不是工具。2、程序员可以让步，却不可以退缩，可以羞涩，却不可以软弱，总之，程序员必须是勇敢的。5、没有情调，不懂浪漫，也许这是程序员的一面，但拥有朴实无华的爱是他们的另一面。1页面引用js的数据是用{{}}，也可以用作属性值。
小程序AI智能名片S2B2C商城的UGC系统概念探秘
weixin_70596807的博客
04-17 320
或许，你也会成为其中的一颗星星，用自己的创作和分享，为这片星空增添更多的光芒和色彩！在商城的UGC平台上，她分享了自己的旅行日记和照片，让更多的人感受到了旅行的魅力。她的分享不仅激发了其他人的旅行欲望，也为商城的旅游产品带来了更多的关注和销量。小李的分享不仅帮助了他人，也让他自己成为了一位知名的健身教练，获得了更多的商业机会。想象一下，你漫步在一个充满奇幻与创意的星空中，每颗星星都闪耀着独特的光芒，它们都是普通人用智慧与热情点亮的——这就是小程序AI智能名片S2B2C商城的UGC系统世界！
微信小程序下载 math.js 的npm包，使用步骤
07-20
在微信小程序中使用 npm 包需要进行额外的配置和操作。下面是使用 npm 包来下载和使用 math.js 的步骤： 1. 确保您的小程序项目已经开启了 npm 支持。在微信开发者工具中，右键点击项目根目录，选择「工具」-「构建 npm」，勾选「使用 npm 模块」选项。 2. 在微信开发者工具的编辑器中的根目录，打开终端或命令行界面。 3. 运行以下命令来安装 math.js npm 包： ``` npm install mathjs ``` 这将会在项目的 `node_modules` 文件夹中安装 math.js 包。 4. 在需要使用 math.js 的页面或组件中导入 math.js： ```javascript import * as math from 'mathjs'; ``` 5. 使用 math.js 进行数学计算： ```javascript const result = math.evaluate('2 + 3'); // 执行数学表达式计算 console.log(result); // 输出 5 ``` 请注意，使用 npm 包需要确保您的小程序项目已经开启了 npm 支持，并且已经按照上述步骤安装并导入了 math.js 包。确保您的开发者工具是最新版本，并且已正确配置了小程序的开发环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值