ThreeJS创建关键帧动画

2023-12-30 21:20

本文主要是介绍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>

实现的效果如下

关键帧动画视频

这篇关于ThreeJS创建关键帧动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/554043

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

顺序表之创建,判满,插入,输出

文章目录 🍊自我介绍🍊创建一个空的顺序表,为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了,满了返回值1,否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以:点赞+关注+评论+收藏(一键四连)哦~ 🍊自我介绍   Hello,大家好,我是小珑也要变强(也是小珑),我是易编程·终身成长社群的一名“创始团队·嘉宾”

Maven创建项目中的groupId, artifactId, 和 version的意思

文章目录 groupIdartifactIdversionname groupId 定义:groupId 是 Maven 项目坐标的第一个部分,它通常表示项目的组织或公司的域名反转写法。例如,如果你为公司 example.com 开发软件,groupId 可能是 com.example。作用:groupId 被用来组织和分组相关的 Maven artifacts,这样可以避免

批处理以当前时间为文件名创建文件

批处理以当前时间为文件名创建文件 批处理创建空文件 有时候,需要创建以当前时间命名的文件,手动输入当然可以,但是有更省心的方法吗? 假设我是 windows 操作系统,打开命令行。 输入以下命令试试: echo %date:~0,4%_%date:~5,2%_%date:~8,2%_%time:~0,2%_%time:~3,2%_%time:~6,2% 输出类似: 2019_06

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

ORACLE 11g 创建数据库时 Enterprise Manager配置失败的解决办法 无法打开OEM的解决办法

在win7 64位系统下安装oracle11g,在使用Database configuration Assistant创建数据库时,在创建到85%的时候报错,错误如下: 解决办法: 在listener.ora中增加对BlueAeri-PC或ip地址的侦听,具体步骤如下: 1.启动Net Manager,在“监听程序”--Listener下添加一个地址,主机名写计