ThreeJS创建关键帧动画

        之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性，另一种方式是用tweenJs，这个使用起来简单，但是缺点要另外引入tweenjs才可以使用，还有一种是threejs自带的动画实现效果，叫关键帧动画，这节补上。

        了解关键帧动画之前要了解其中几个重要的概念，

KeyframeTrack 关键帧轨道：

关键帧轨道用来制作一组动画，用来在这组动画中动态修改模型某一个属性的值，最终形成动画，比如可以修改模型的位置，修改模型的材质颜色等，KeyframeTack的入参如下

KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )

name - 关键帧轨道(KeyframeTrack)的标识符
times - 关键帧的时间数组, 被内部转化为 Float32Array
values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array
interpolation - 使用的插值类型
同时，threejs提供多种KeyFrameTrack的子类，来展示各种不用的属性值改变，包括：
VectorKeyframeTrack:向量类型的关键帧轨道，ColorKeyframeTrack:反应颜色变化的关键帧轨道
，BooleanKeyframeTrack:布尔类型的关键帧轨道，NumberKeyframeTrack:数字类型的关键帧轨道，QuaternionKeyframeTrack:四元数类型的关键帧轨道，StringKeyframeTrack:字符串类型的关键帧轨道。

AnimationClip 动画剪辑

动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它用来定义动画，它的入参如下

AnimationClip( name : String, duration : Number, tracks : Array )
name - 此剪辑的名称
duration - 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。
tracks - 一个由关键帧轨道（KeyframeTracks）组成的数组。AnimationClip里面，每个动画属性的数据都存储在一个单独的KeyframeTrack中。

Animation Mixer 动画混合器

动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器，它的入参如下：AnimationMixer( rootObject : Object3D )
rootObject - 混合器播放的动画所属的对象。

AnimationAction 动画动作

AnimationActions 用来调控制存储在AnimationClips中的动画。通过配置AnimationAction，我们可以决定何时播放、暂停或停止其中一个混合器中的某个AnimationClip， 这个AnimationClip是否需要重复播放以及重复的频率， 是否需要使用淡入淡出或时间缩放，以及一些其他内容。它的入参如下：AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D )

mixer - 被此动作控制的 动画混合器
clip - 动画剪辑 保存了此动作当中的动画数据
localRoot - 动作执行的根对象

下面放完整代码，可以直接复制到html中运行，不过记得添加上两个js文件

<!DOCTYPE html>
<html><head includeDefault="true"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>位置移动</title><script src="./ThreeJs/js/three.js"></script><script src="./ThreeJs/js/OrbitControls.js"></script>
</head><body><div class="text"></div><div id="container"></div><script>var camera, scene, renderer, controls;var mixer;init();// 初始化场景function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color( 0xf0f0f0 );scene.fog = new THREE.Fog(scene.background, 3000, 5000);}// 初始化相机function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(150, 150, 150);camera.lookAt(new THREE.Vector3(0, 0, 0));}// 初始化灯光function initLight() {var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源directionalLight.color.setHSL(0.1, 1, 0.95);directionalLight.position.set(0, 200, 0).normalize();scene.add(directionalLight);var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源ambient.position.set(0, 0, 0);scene.add(ambient);}//创建模型以及实现动画效果function initCube(){clock = new THREE.Clock();cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( './ThreeJs/images/box.png' ) } );var mesh = new THREE.Mesh( cubeGeo, cubeMaterial );;scene.add( mesh );mesh.name = "Box";//创建时间轴，并配置第一个动画效果，改变模型位置const times = [0, 3, 6]; //时间轴上，设置三个时刻0、3、6秒const values = [0, 0, 0, 100, 0, 0, 0, 100, 100];// times中三个不同时间点，物体分别对应values中的三个xyz坐标const posKF = new THREE.KeyframeTrack('Box.position', times, values);// 0~3秒，物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)//创建第二个动画效果，改变模型角度const xAxis = new THREE.Vector3(1,0,0) //三维向量，沿x轴const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis,0)//起点角度const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis,Math.PI)//终点角度const rotateValues = [ qInitial.x,qInitial.y,qInitial.z,qInitial.w, qFinal.x,qFinal.y,qFinal.z,qFinal.w,qInitial.x,qInitial.y,qInitial.z,qInitial.w];//设置三个关键帧的角度，const rotateKF = new THREE.QuaternionKeyframeTrack('Box.quaternion', times, rotateValues);//创建第三个动画效果，设置模型颜色const colorValues = [1, 0, 0, 0, 0, 1, 0, 1, 1];// times中三个不同时间点，分别设置三种不同的颜色const colorKF = new THREE.KeyframeTrack('Box.material.color', times, colorValues);// 0~3秒，颜色从[1,0,0]到[0,0,1]最后到[0,1,1]//将三个动画效果添加到AnimationClip中，名字，持续时间（与时间轴对应），动画组const clip = new THREE.AnimationClip("test", 6, [posKF, rotateKF, colorKF]);//创建动画混合器mixer = new THREE.AnimationMixer(mesh);// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationActionvar AnimationAction = mixer.clipAction(clip);//通过操作Action设置播放方式AnimationAction.timeScale = 1;//默认1，可以调节播放速度// AnimationAction.loop = THREE.LoopOnce; //不循环播放AnimationAction.play();//开始播放}// 初始化渲染器function initRenderer() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x4682B4, 1.0);document.body.appendChild(renderer.domElement);}// 初始化轨迹球控件function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.5;// 视角最小距离controls.minDistance = 100;// 视角最远距离controls.maxDistance = 5000;// 最大角度controls.maxPolarAngle = Math.PI / 2.2;}//加载初始化function init() {initScene();initCamera();initLight();initCube();initRenderer();initControls();render();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function render() {renderer.render(scene, camera); //执行渲染操作mixer.update(0.0166666666);//这里给动画设置更新速度，因为默认是一秒钟渲染60次，所以这里设置为1/60的值，requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧	}// 更新控件function update() {controls.update();}</script>
</body></html>

实现的效果如下

关键帧动画视频

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

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

相关文章

iOS实时查看App运行日志

iOS实时查看App运行日志

目录 一、设备连接 二、使用克魔助手查看日志 三、过滤我们自己App的日志 &#x1f4dd; 摘要&#xff1a; 本文介绍了如何在iOS iPhone设备上实时查看输出在console控制台的日志。通过克魔助手工具&#xff0c;我们可以连接手机并方便地筛选我们自己App的日志。 &#x1f4…
阅读更多...
鸟瞰uml（下）

鸟瞰uml（下）

36.组件是系统中遵从一组接口且提供实现的一个物理部件&#xff0c;通常指开发和运行时类的物理实现 37.部件图用于对系统的静态实现视图建模&#xff0c;这种视图主要支持系统部件的配置管理&#xff0c;通常可以分为以下4种方式来完成&#xff1a; 对源代码进行建模&#x…
阅读更多...
Rust 圣经 阅读 引用与借用

Rust 圣经 阅读 引用与借用

Rust 通过 借用&#xff08;Borrowing&#xff09; 在使用某个变量的指针或引用。 获取变量的引用&#xff0c;称之为 借用&#xff08;borrowing&#xff09; 。 引用与解引用 引用是为了解决在使用函数时&#xff0c;频繁地传递所有权。 引用只是获取了引用权&#xff0c;而…
阅读更多...
魔改Stable Diffusion，开源创新“单目深度估计”模型

魔改Stable Diffusion，开源创新“单目深度估计”模型

单目深度估计一直是计算机视觉领域的难点。仅凭一张 RGB 图像,想要还原出场景的三维结构,在几何结构上非常不确定,必须依赖复杂的场景理解能力。 即便使用更强大的深度学习模型来实现&#xff0c;也面临算力需求高、图像数据注释量大、泛化能力弱等缺点。 为了解决这些难题&a…
阅读更多...
线性代数第一课+第二课总结

线性代数第一课+第二课总结

第一课 第一课是简单的行列式计算&#xff0c;主要就是要把左下角的数字全部转换为0&#xff0c;通过减去其他行的式子即可实现&#xff0c;最后把对角线的所有数字相乘&#xff0c;得到的结果是最后行列式的答案 第二课 例题1 硬算理论上其实也是可行的&#xff0c;但是使…
阅读更多...
R语言——reshape2包、tidyr包、dplyr包（五）

R语言——reshape2包、tidyr包、dplyr包（五）

目录 一、数据转换之reshape2包&#xff1a;melt与dcast函数 二、数据转换之tidyr包&#xff1a;gather与spread函数&#xff0c;separate与unite函数 三、据转换之dplyr包 四、参考 一、数据转换之reshape2包&#xff1a;melt与dcast函数 merge 函数 使用merge函数 x &l…
阅读更多...
听GPT 讲Rust源代码--library/proc_macro

听GPT 讲Rust源代码--library/proc_macro

File: rust/library/proc_macro/src/bridge/rpc.rs 在Rust源代码中&#xff0c;rust/library/proc_macro/src/bridge/rpc.rs文件的作用是实现了Rust编程语言的编译过程中的远程过程调用&#xff08;RPC&#xff09;机制。 这个文件定义了与编译器的交互过程中使用的各种数据结构…
阅读更多...
阿里云2核2G3M服务器能放几个网站？有限制吗？

阿里云2核2G3M服务器能放几个网站？有限制吗？

阿里云2核2g3m服务器可以放几个网站&#xff1f;12个网站&#xff0c;阿里云服务器网的2核2G服务器上安装了12个网站&#xff0c;甚至还可以更多&#xff0c;具体放几个网站取决于网站的访客数量&#xff0c;像阿里云服务器网aliyunfuwuqi.com小编的网站日访问量都很少&#xf…
阅读更多...
LeetCode 1758. 生成交替二进制字符串的最少操作数【字符串,模拟】1353

LeetCode 1758. 生成交替二进制字符串的最少操作数【字符串,模拟】1353

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…
阅读更多...
【数值分析】三次样条插值

【数值分析】三次样条插值

三次样条插值 2023年11月5日 #analysis 文章目录 三次样条插值1. 样条函数1.1 截断多项式 2. 三次样条插值2.1 B样条为基底的三次样条插值函数2.1.1 第一种边界条件2.1.2 第二种边界条件2.1.3 第三种边界条件 2.2 三弯矩法求三次样条插值函数2.2.1 第一种边界条件2.2.2 第二种…
阅读更多...
万界星空科技低代码平台基本模块与优势

万界星空科技低代码平台基本模块与优势

低代码平台&#xff08;Low-Code Development Platform&#xff0c;LCDP&#xff09;就是使用低代码的方式进行开发&#xff0c;能快速设置和部署的平台。低代码平台旨在简化应用开发过程&#xff0c;降低开发难度&#xff0c;缩短开发周期&#xff0c;并使非专业程序员&#x…
阅读更多...
线性代数笔记3 1.1

线性代数笔记3 1.1

学习视频&#xff1a; 2.2 矩阵运算&#xff08;二&#xff09;_哔哩哔哩_bilibili 包括内容&#xff1a; p10矩阵运算&#xff08;二&#xff09; p11特殊矩阵 p12逆矩阵&#xff08;一&#xff09; p13逆矩阵&#xff08;二&#xff09;
阅读更多...
JSON与XML的比较：优缺点分析与应用场景选择

JSON与XML的比较：优缺点分析与应用场景选择

JSON&#xff08;JavaScript Object Notation&#xff09;和XML&#xff08;eXtensible Markup Language&#xff09;都是用于存储和传输数据的格式&#xff0c;它们各自具有一些优点和缺点&#xff0c;适用于不同的应用场景。 JSON的优点&#xff1a; 易读性&#xff1a;JSO…
阅读更多...
基于Python +Selenium的爬虫详解

基于Python +Selenium的爬虫详解

今天我们来详细学习一些 selenium 的强大用法 一、selenium简介 由于requests模块是一个不完全模拟浏览器行为的模块&#xff0c;只能爬取到网页的HTML文档信息&#xff0c;无法解析和执行CSS、JavaScript代码&#xff0c;因此需要我们做人为判断&#xff1b; 1、什么是sele…
阅读更多...
几个实用网站

几个实用网站

论文短语&#xff1a;https://www.phrasebank.manchester.ac.uk/ 翻译&#xff1a;https://www.deepl.com/en/translator 润色&#xff1a;https://quillbot.com/ 榜单&#xff1a;www.paperwithcode.com ****NLP民工的乐园: 几乎最全的中文NLP资源库&#xff1a;****https…
阅读更多...
Python将两个或多个列表合并为一个列表，并根据每个输入列表中的元素的位置将其组合在一起

Python将两个或多个列表合并为一个列表，并根据每个输入列表中的元素的位置将其组合在一起

将两个或多个列表合并为一个列表&#xff0c;并根据每个输入列表中的元素的位置将其组合在一起。 这个需求在实际开发过程中应该说非常常见&#xff0c;当然python也给我们内置了相关方法&#xff01; zip(*iterables, strictFalse) 在多个迭代器上并行迭代&#xff0c;从每…
阅读更多...
PowerShell——多任务后台作业

PowerShell——多任务后台作业

PowerShell——多任务后台作业 实验环境&#xff1a;操作系统为Windows8(或之后)或者Windows Server2012&#xff08;或之后&#xff09;运行PowerShell v3或更新版本的计算机 任务: 创建一个后台作业获取计算机上系统事件日志中最近的26条错误记录&#xff0c;之后将记录导出…
阅读更多...
算法与人生 揭秘C语言中高效搜索的秘诀——二分查找算法详解

算法与人生 揭秘C语言中高效搜索的秘诀——二分查找算法详解

引言&#xff0c;少年们&#xff0c;大家好。在这里祝大家元旦快乐&#xff0c;我是博主那一脸阳光&#xff0c;今天来介绍二分查找 在计算机科学领域&#xff0c;搜索算法是数据处理和问题解决的重要工具之一。其中&#xff0c;**二分查找算法&#xff08;Binary Search&#…
阅读更多...
最小费用最大流

最小费用最大流

package tgb.第三章; import java.util.ArrayDeque; import java.util.Arrays; import java.util.Queue; import java.util.Scanner; public class ok货物调配{ static int maxData 0x7fffffff; static Queue dl new ArrayDeque(); static int head[] new int[5001]; stat…
阅读更多...
Git开发工具基本使用

Git开发工具基本使用

文章目录 前言Git仓库基本概念基本环境安装清除原先配置生成秘钥配置Host添加公钥Github添加Gitee添加测试 本地仓库基本概览查看提交日志(log)版本回退添加文件至忽略列表分支分支冲突 远程仓库推送到远程仓库从远程仓库中抓取和拉取 在Idea中使用Git总结 前言 这里只是对Git…
阅读更多...
最新文章

Copyright @ 2022~2023