Three.js使用动画库( GSAP 一款基于 JavaScript 的 web动画库)

安装

npm install gsap

使用

<template><div></div>
</template><script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入动画库
import gsap from 'gsap'// 场景
const scene = new THREE.Scene();// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 着色器程序
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
// 动态创建元素
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在你的动画循环里调用.update()
controls.enableDamping = true// 设置动画   
const animate = gsap.to(cube.position, {x: 5,duration: 5, // 持续时间ease: 'power1.inOut', // 速率repeat: 2, // 重复次数, 无限次循环是-1yoyo: true, // 往返运动delay: 2, // 延迟时间onStart: () => {console.log('动画开始');},onComplete: () => {console.log('动画完成');}
}) // 移动
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 }) // 旋转
gsap.to(cube.scale, { x: 2, duration: 5 }) // 缩放// 双击暂停/启动
window.addEventListener('dblclick', () => {if (animate.isActive()) {animate.pause()} else {animate.resume()}
})
// 双击控制屏幕进入全屏,退出全屏
// window.addEventListener('dblclick', () => {
//   const fullscreenElement = document.fullscreenElement;
//   // 判断当前是否有全屏元素
//   if (!fullscreenElement) {
//     renderer.domElement.requestFullscreen()
//   } else {
//     document.exitFullscreen()
//   }
// })// 浏览器动画
function render(time) {controls.update()renderer.render(scene, camera);// 渲染下一帧的时候会调用 render 函数requestAnimationFrame(render);
}
render()// 监听画面变化,更新渲染画面
window.addEventListener('resize', () => {// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4410.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适用于芯片行业的开发及管理工具:版本控制、持续集成、代码分析及项目管理工具介绍

3月28日-29日&#xff0c;2024国际集成电路展览会暨研讨会&#xff08;IIC Shanghai&#xff09;在上海成功举行。此次盛会汇聚了集成电路产业的众多领军企业&#xff0c;共同探寻和把握集成电路产业的发展脉络。 龙智携芯片研发及管理解决方案亮相展会&#xff0c;展示如何通…

什么是外汇杠杆交易?

外汇杠杆交易是目前的外汇交易市场中&#xff0c;投资者进行外汇交易的重要方式&#xff0c;通过这样的交易方式&#xff0c;投资者就有机会进行以小搏大的交易&#xff0c;他们的交易就有可能会更成功&#xff0c;因此&#xff0c;投资者应该对这样的交易方式进行了解&#xf…

springboot 集成 activemq

文章目录 一&#xff1a;说明二&#xff1a;e-car项目配置1 引入activemq依赖2 application启动类配置消息监听3 application.yml配置4 MQConfig.java 配置类5 ecar 项目中的监听6 junit 发送消息 三&#xff1a;tcm-chatgpt项目配置5 MQListener.java 监听消息 三 测试启动act…

Java23种设计模式-行为型模式之访问者模式

访问者模式&#xff08;Visitor Pattern&#xff09;&#xff1a;主要用于解决对象结构中元素的行为操作问题。这种模式允许在不修改对象结构的情况下&#xff0c;为其添加新的操作。 主要角色&#xff1a; 访问者&#xff08;Visitor&#xff09;&#xff1a;定义了一个访问元…

RV1126添加gc2093摄像头

前言 上篇讲的是双目摄像头GC2053摄像头进行拉流&#xff0c;本篇介绍下如何适配添加RGB Sensor GC2093并且可以在windows上成功拉取视频流 平台背景 开发板&#xff1a;易百纳开发板 cpu: rv1126 sensor: gc2093 200w像素 2lanes type&#xff1a;MIPI kernel: 4.19.111 sys…

K8S深度解析:从入门到精通的全方位指南

目录 一、Kubernetes简介 二、Kubernetes的核心作用 三、Kubernetes架构图例 四、Kubernetes核心概念 Harbor仓库概述&#xff1a; Master----管理组件&#xff1a; API Server&#xff08;集群之心&#xff09;&#xff1a; Scheduler&#xff08;调度大师&…

基于Transformer深度学习的翻译模型(英->中)源码系统

第一步&#xff1a;Transformer介绍 Transformer是一种基于注意力机制的序列到序列模型&#xff0c;它在机器翻译任务中表现出色并逐渐成为自然语言处理领域的主流模型。Transformer模型的核心思想是使用自注意力机制&#xff08;self-attention&#xff09;来捕捉输入序列中各…

Redis系列:内存淘汰策略

1 前言 通过前面的一些文章我们知道&#xff0c;Redis的各项能力是基于内存实现的&#xff0c;相对其他的持久化存储&#xff08;如MySQL、File等&#xff0c;数据持久化在磁盘上&#xff09;&#xff0c;性能会高很多&#xff0c;这也是高速缓存的一个优势。 但是问题来了&am…

如果通过Glide 设置图片圆角

要给图片设置一个圆角,通常方法是在ImageView 标签外添加一个CardView 标签,然后设置圆角值,但是今天遇到一个问题就是 RecyclerView Item 中这样操作的话会遇到这样的一个报错: Cannot call this method while RecyclerView is computing a layout or scrolling androidx.rec…

RLC防孤岛负载测试,你了解多少?

RLC防孤岛负载测试是一种用于检测并防止电力系统中出现孤岛现象的测试方法。孤岛现象是指在电网故障或停电的情况下&#xff0c;部分电网与主电网断开连接&#xff0c;形成一个独立的、不受控制的电力系统。这种情况下&#xff0c;如果不及时切断与孤岛的连接&#xff0c;可能会…

【SAP ME 27】SAP ME创建开发组件(DC)serviceExt

目录 1、说明 2、创建开发组件(DC) 3、相关性 4、公共部分 5、构建

HarmonyOS 应用开发——入门

首先当然是华为的官方文档了&#xff0c;要认真学习: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-overview-0000001478061421-V2 不想花时间看&#xff0c;可以看我下面总结的干货&#xff0c;哈哈 第一个问题&#xff1a;stage架构和fa架构的区…

GPU服务器和普通服务器有何区别?

众所周知&#xff0c;服务器是网络中的重要设备&#xff0c;要接受少至几十人、多至成千上万人的访问&#xff0c;因此对服务器具有大数据量的快速吞吐、超强的稳定性、长时间运行等严格要求。 GPU服务器和普通服务器的主要区别在于硬件配置和适用场景&#xff0c;特别是处理器…

应急行业的智能安全帽(高端)

前面介绍了低端、中端安全帽&#xff0c;接着再讲讲高端安全帽。做高端安全帽的企业非常少&#xff0c;估计一只手都数的出来。确实也和智能安全帽这个领域体量有关系&#xff0c;并且他有一个新的“劲敌”——智能眼镜从其他领域瓜分原属于他的市场&#xff0c;这些都是题外话…

static为什么不能修饰String类

在Java中&#xff0c;static 关键字用于修饰类成员&#xff08;字段、方法、内部类&#xff09;以及代码块&#xff0c;它主要表示这些成员或代码块与类本身关联&#xff0c;而不是与类的实例关联。当你提到 static 不能修饰 String 类时&#xff0c;我猜你可能是在思考为什么 …

【操作系统】线程和进程的区别 详细版

进程的定义与特征 进程是一个正在执行的程序的实例。当我们运行一个程序时&#xff0c;它并不会立即执行。程序需要经过一系列步骤才能执行&#xff0c;而这些执行步骤被称为进程&#xff0c;进程是一个正在执行的程序的实例。每个进程都拥有自己的内存空间&#xff0c;与其他…

Cadence OrCAD学习笔记(1)OrCAD入门介绍

最近换份工作主要用到Cadence&#xff0c;之前都是用AD居多&#xff0c;所以现在也开始记录下Cadence学习过程&#xff0c;方便后面复习。 参考教程&#xff1a; OrCAD视频教程第1期&#xff1a;OrCAD入门介绍_哔哩哔哩_bilibili 本期主要介绍OrCAD的主要部件 其中用的较多的…

【软件开发规范篇】Git分支使用规范

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…

软考之零碎片段记录(二十七)+复习巩固(十三、十四)

学习 1. 案例题 涉及到更新的。肯能会是数据流的终点E, P, D 数据流转。可能是 P->EP->D(数据更新)P->P(信息处理)D->P(提取数据信息) 2. 案例2 补充关系图时会提示不增加新的实体。则增加关联关系 3. 案例3 用例图 extend用于拓展&#xff0c;当一个用例…

磁盘未格式化,数据恢复大揭秘

一、磁盘未格式化现象概述 在日常使用电脑的过程中&#xff0c;我们有时会遇到磁盘未格式化的提示&#xff0c;这意味着我们的磁盘突然间变得不可识别&#xff0c;所有的数据和文件都似乎消失了。这种情况常常发生在外接硬盘、U盘等存储设备上&#xff0c;给我们的工作和生活带…