threejs tween补间动画(七)

1.引入依赖

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'//引入相机轨道控制器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'//引入GLTF模型加载器
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';//大模型解压加载器(draco解析器)
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js"//加载hdr文件作为环境贴图

2.创建场景

const scene = new THREE.Scene()
// 在场景中添加坐标辅助器
const axesHelper = new THREE.AxesHelper(10)//数据表示坐标轴的长度
scene.add(axesHelper)//将坐标轴添加到场景中

3.创建透视相机

const camera = new THREE.PerspectiveCamera(45,//视角,可视范围window.innerWidth / window.innerHeight,//摄像机的宽高比0.1,//摄像机最近能看到的距离1000//摄像机最远能看到的距离
)
// 设置相机的位置
camera.position.x = 8
camera.position.y = 8
camera.position.z = 8
camera.lookAt(0, 0, 0)//摄像机的朝向

4.创建渲染器

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)//渲染器的尺寸大小
document.body.appendChild(renderer.domElement)//renderer.domElement就是canvas元素

5.添加相机轨道控制器

// 添加相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true //打开惯性阻尼
controls.dampingFactor = 0.05//阻尼系数
controls.autoRotate = false//是否自动旋转(围绕着lookAt的坐标旋转)

6.开始渲染

window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight//重置相机的宽高比camera.updateProjectionMatrix()//更新相机的投影矩阵renderer.setSize(window.innerWidth, window.innerHeight)//重置渲染器的宽高比
})function animate() {TWEEN.update()//更新补间动画controls.update()renderer.render(scene, camera)//渲染=相机+场景requestAnimationFrame(animate)//下一帧继续调用渲染函数
}
animate()

于是得到这样的一个画面
在这里插入图片描述

7.创建几何体

// 创建一个球体
const ball = new THREE.SphereGeometry(5, 32, 16);
let textureLoader = new THREE.TextureLoader()//创建纹理加载器
let texture = textureLoader.load('./img/Earth.png')//加载纹理图片
texture.colorSpace = THREE.SRGBColorSpace//添加颜色深度
//创建材质
const material = new THREE.MeshBasicMaterial({map: texture
});
const cube_ball = new THREE.Mesh(ball, material);//创建网格
cube_ball.position.x = -10//设置几何体的位置
scene.add(cube_ball);

得到如下场景
在这里插入图片描述

8.添加补间动画

const tween = new TWEEN.Tween(cube_ball.position)//将物体的起始位置传入tween
//第一个参数:到达的位置;第二个参数:所花的时间,链式调用onUpdate
tween.to({ x: 10 }, 2000).onUpdate(() => {console.log(cube_ball.position.x, 99999);
})
// tween.repeat(Infinity)//重复次数,infinity表示循环,直接写数字表示循环的次数
// tween.yoyo(true)//循环往复运动
// tween.delay(0)//延迟,补间动画延迟一秒钟运行 
tween.easing(TWEEN.Easing.Quadratic.InOut) //设置缓动函数let tween2 = new TWEEN.Tween(cube_ball.position)//设置第二段动画
tween2.to({ x: -10 }, 2000).onUpdate(() => {
})//第一段从x:-10移动到x:10
//第二段从x:10移动到x:-10
tween.chain(tween2)//第一段动画完成后链接第二段动画
tween2.chain(tween)//第二段动画完成后链接第一段动画tween.start()//启动补间动画

在这里插入图片描述

9.tween的回调函数

 tween.onStart(() => { })//动画开始的时候的回调tween.onComplete(()=>{})// 完成的时候的回调tween.stop(()=>{})// 停止的时候的回调tween.onUpdate(()=>{})// 更新时的回调

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

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

相关文章

用本地电脑连接centos

要从本地计算机链接到CentOS服务器,通常可以使用SSH(Secure Shell)。以下是如何使用SSH命令从本地计算机连接到CentOS服务器的步骤: 打开终端(在Linux或Mac上)或者使用SSH客户端(在Windows上&a…

汽车零部件制造企业如何选择合适的ESOP电子作业指导书系统

随着汽车产业的不断发展,汽车零部件制造企业在提高生产效率和产品质量方面面临着越来越大的挑战。为了解决这些问题,越来越多的汽车零部件制造企业开始采用ESOP电子作业指导书系统,以帮助他们管理和优化生产流程。但是,在选择合适…

【ppt技巧】有哪些方法可以实现?PPT转换为图片!

将ppt文件转换为图片都有哪些方法可以实现?其实很简单,一起来看一下如何操作吧! 方法一: 使用格式转换器,有些文件格式转换器,支持ppt转换为图片。 方法二: 不需要转换器,直接在…

Pixel手机中文网-全球最大的华人Pixel手机论坛

Pixel手机中文网,使用Pixel手机华人的聚集地,快来加入这个大家庭分享和创作吧 😃 googlepixel.cn

Batch入门学习:从零开始掌握批处理脚本

目录 1. Batch脚本简介 1.1 什么是Batch脚本? 1.2 Batch脚本的历史 1.3 Batch脚本的应用场景 2. Batch脚本基本语法 2.1 注释 2.2 变量 2.3 常用命令 2.3.1 ECHO 2.3.2 PAUSE 2.3.3 CLS 2.3.4 GOTO 2.3.5 IF 2.3.6 FOR 2.4 参数传递 2.5 输入输出重定向 3. B…

STM32之三:中断外部中断

目录 1. 什么是中断 1.1 中断概念 1.2 中断优先级 1.3 中断嵌套 2.STM32中断 2.1 NVIC中断优先级 3 外部中断 3.1 EXTI简介 3.2 EXTI中断/事件线 3.3 EXTI功能框图 3.4 中断和事件的区别? 3.5 什么时候用外部中断? 3.怎么使用STM32中断 3.…

stm32F4库函数c++和C混合编程笔记20240626

1、有时候需要用到c的一些特性,封装,类等等。 2、研究一下如何更改之前c工程的内容,实现混合编程。 操作 1、keil设置 2、要重新建立一个main文件,后缀名是cpp,cpp才能调用cpp. 后面如果要用到c特性的,需要…

msvcr100.dll丢失的解决方法,学会这几种方法都能快速解决dll丢失

一、 msvcr100.dll丢失原因分析 系统文件损坏 系统文件损坏是导致msvcr100.dll丢失的常见原因之一。这种情况可能由多种因素引起,包括但不限于: 磁盘错误:磁盘的物理损坏或逻辑错误可能导致系统文件损坏。 病毒或恶意软件攻击&#xff1a…

【探索Linux】P.35(传输层 —— UDP协议)

阅读导航 引言一、UDP协议端格式二、UDP的特点三、UDP的缓冲区四、基于UDP的应用层协议温馨提示 引言 在上一篇文章中,我们深入探讨了网络协议的应用层,揭示了各种协议如何协同工作以确保信息在网络中正确、高效地传递。从HTTP到FTP,每一层协…

C++ Thead多线程 condition_variable 与其使用场景---C++11多线程快速学习

std::condition_variable 的步骤如下&#xff1a; 创建一个 std::condition_variable 对象。 创建一个互斥锁 std::mutex 对象&#xff0c;用来保护共享资源的访问。 在需要等待条件变量的地方 使用 std::unique_lock<std::mutex> 对象锁定互斥锁 并调用 std::conditio…

6.二叉树.题目2

6.二叉树.题目2 题目9.找树左下角的值10.路径总和11.从中序与后序遍历序列构造二叉树12.最大二叉树13.合并二叉树14.二叉搜索树中的搜索15.验证二叉搜索树16.二叉搜索树的最小绝对差 总结 题目 9.找树左下角的值 题目链接 给定一个二叉树&#xff0c;在树的最后一行找到最左边…

【LeetCode】二、链表相关:移除与反转链表

文章目录 1、链表结构2、leetcode203&#xff1a;移除链表元素3、leetcode206&#xff1a;反转链表 1、链表结构 和数组不同&#xff0c;此时不需要连续的内存空间&#xff0c;如下为单端链表&#xff0c;无pre指针 时间复杂度&#xff1a; 和数组相反&#xff0c;访问元素时…

Jackson和fastjson解决序列化时字段属性大小写改变的问题

在部分特殊场景下&#xff0c;我们可能会把实体的字段属性改成全部大写&#xff0c;但是在返回前端时&#xff0c;字段会被序列化成小写。 比如我们有一个这个类属性都是大写&#xff1a; 后端接口是这样的 然后我们请求后&#xff0c;会发现我们的字段被变成全部小写的。 …

linux服务器解压/压缩文件

在Linux服务器上&#xff0c;可以使用zip和tar命令来进行文件的打包&#xff08;压缩&#xff09;和解包&#xff08;解压缩&#xff09;。下面是它们的基本用法&#xff1a; 打包&#xff08;压缩&#xff09;与解压方法&#xff1a; 1. 使用 zip 命令 打包成 .zip 文件&am…

Java面试题:讨论如何使用JVM工具(如jconsole、jstack、jmap)诊断内存泄漏

诊断Java应用程序中的内存泄漏可以使用JVM提供的多种工具&#xff0c;如jconsole、jstack和jmap。这些工具可以帮助开发者监控和分析Java应用程序的运行状况&#xff0c;定位内存泄漏的根源。以下是这些工具的详细介绍及其使用方法&#xff1a; 1. jconsole JConsole&#xf…

CCAA:认证通用基础 7(认证的基本概念)

7认证的基本概念 7.1认证类型(产品认证、管理体系认证、服务认证)及基本特征 第一节 认证 1.认证的定义和本质 1.1认证的定义 (1)认证:与产品、过程、体系或人员有关的第三方证明。 ①”产品&#xff0c;过程&#xff0c;体系或人员”是认证的对象&#xff0c;认证是对“产…

PyQt6+mitmproxy,实现抓取网络请求并打印到桌面的窗口中

你可以将你的PyQt6应用程序与mitmproxy结合使用&#xff0c;以便在GUI中显示拦截的HTTP请求和响应。以下是修改后的代码&#xff1a; 安装依赖项&#xff1a; 确保你已经安装了PyQt6和mitmproxy&#xff1a; pip install PyQt6 mitmproxy编写Python代码&#xff1a; 创建一个Py…

软考中级:信息系统管理工程师备考资源

信息系统管理工程师备考资源 1 备考资源内容2 使用心得3 资源地址 1 备考资源内容 资源内容包含三部分&#xff1a;教程书籍pdf、备考笔记、历年真题 可以结合“软考通”APP进行练习备考&#xff0c;无偿分享。 2 使用心得 上面的资源很多&#xff0c;可以先从复习笔记开…

Kotlin作用域函数it和with的使用场景

在 Kotlin 中&#xff0c;apply、run、with 使用 this&#xff0c;而 let 和 also 使用 it&#xff0c;这背后的原因是为了提供灵活性和代码清晰度。不同的作用域函数有不同的设计目的&#xff0c;选择使用 this 或 it 是为了适应不同的使用场景。以下是详细解释&#xff1a; …