Animation 初印象

动画效果

播放动画需要基本元素

AnimationMixer

一个对象所有动作的管理者

用于场景中特定对象的动画的播放器。一个对象可能有多个动作,Mixer 是用来管理所有动作的,它可以调度出对象的某个动作进行操控,如 mixer = new THREE.AnimationMixer(obj); mixer 就能管理 obj 对象的所有动画了。拥有 mixer 后,在 animate 函数中进行更新操作,用于更新该对象目前的状态。 mixer 可以让这个对象同时播放多个动作,因此需要在每帧中执行 update 方法

AnimationClip

一个对象的一个动作

动画剪辑(AnimationClip)是一个可重用的关键帧轨道集,它代表动画。

AnimationAction

用来管理单个动作,让这个动作开始暂停等等

AnimationActions 用来调度存储在 AnimationClips 中的动画。说明: AnimationAction的大多数方法都可以链式调用

使用方法

  1. 加载一个对象,加载这个对象对应的 mixer 用于管理所有动作

mixer = new THREE.AnimationMixer(obj);

  1. 加载出一个 action,用于处理单个(clip)动画集,并进行播放

mixer.clipAction(obj.animations[0]).play();

上文提到过 action 是可以链式操作了,clipAction 方法返回一个 action 对象

  1. 在每一帧中更新对象的状态

mixer.update(delta);

实际代码

export function AnimationCommin() {
const content = useRef(); const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfe3dd);
const pointLight = new THREE.PointLight(0xffffff, 0.6);
pointLight.position.set(150, 150, 150);
scene.add(pointLight);
scene.add(new THREE.AmbientLight(0xffffff, 2));
const clock = new THREE.Clock(); let mixer; useEffect(() => {
const canvas = content.current;
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight); const stats = new Stats();
canvas.appendChild(stats.dom); const camera = new THREE.PerspectiveCamera(
40,
canvas.clientWidth / canvas.clientHeight,
1,
1000
);
camera.position.set(200, 200, 200); const controls = new OrbitControls(camera, canvas);
controls.update(); const loader = new FBXLoader();
loader.load("/RumbaDancing.fbx", (obj) => {
scene.add(obj); mixer = new THREE.AnimationMixer(obj);
mixer.clipAction(obj.animations[0]).play();
}); animate(); function animate() {
requestAnimationFrame(animate); const delta = clock.getDelta(); if (mixer) mixer.update(delta); controls.update(); stats.update(); renderer.render(scene, camera);
}
});
return <canvas ref={content} />;
}

Three 之 Animation 初印象的更多相关文章

  1. Vue.js之初印象

    一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...

  2. Django初印象之视图(view)

    一.view的初印象 一个视图函数(类),简称视图.我们发起web请求时,返回的web响应.[大家约定成俗将视图放置在项目(project)或应用程序(app)目录中的名为views.py的文件中.] ...

  3. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  4. OpenCL学习笔记(一):摩尔定律,异构计算与OpenCL初印象

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld.  技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 关于摩尔定律: 摩尔定律19 ...

  5. [强化学习]Part1:强化学习初印象

    引入 智能 人工智能 强化学习初印象 强化学习的相关资料 经典书籍推荐:<Reinforcement Learning:An Introduction(强化学习导论)>(强化学习教父Ric ...

  6. css Animation初体验

    目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中 ...

  7. [置顶] Retrofit2 初印象?

    鄙人由于工作繁忙很久没写博客了还望大家谅解!之前csdn登不上,算了不说借口了,retrofit2相信已经很火了吧,而且上手也比较容易,之前可能大家都是用Volley,Okhttp.Okhttp3其实 ...

  8. AngularJS 初印象------对比 Asp.net MVC

    之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了解,也不解为什么前端也要这么分.这两天看了AngularJs的官方教 ...

  9. Web API初印象

    理解REST,RESTful和Web API 1.REST:Representational State Transfer表征状态转移,是Roy Fielding博士在2000年他的博士论文中提出来的 ...

随机推荐

  1. 分布式链路追踪系统Sleuth和ZipKin

    1.微服务下的链路追踪讲解和重要性 简介:讲解什么是分布式链路追踪系统,及使用好处 进行日志埋点,各微服务追踪. 2.SpringCloud的链路追踪组件Sleuth 1.官方文档 http://cl ...

  2. jQuery中获取属性值:attr()、html()、text()、val()等(一)

    <!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...

  3. 多线程编程<二>

    wait()与notify(): 1 public class ThreadComDemo { 2 public static void main(String[] args) { 3 try { 4 ...

  4. Flink Streaming状态处理(Working with State)

    参考来源: https://www.jianshu.com/p/6ed0ef5e2b74 https://blog.csdn.net/Fenggms/article/details/102855159 ...

  5. 战胜了所有对手,却输给了时代。MVVM--jQuery永远的痛。

    前言 第二次浏览器战争中,随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧,浏览器碎片化问题越来越严重,不同的浏览器执行不同的标准,对于开发人员来说这是一个恶梦.为 ...

  6. 高德地图&兴趣点(poi)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 接口自动化-python+requests+pytest+csv+yaml

    本套代码和逻辑 是本人的劳动成果,如果有转载需要标注, 非常适合公司做项目的同学!!!小白也可以学哦! 1.项目目录  2.公共方法的封装 2.1如果不用配置文件 可以使用这个方法进行封装--但是有一 ...

  8. 假期作业03:使用IDE开发你的Java程序

    假期作业03:使用IDE开发你的Java程序 一.使用Eclipse创建一个Java项目HelloWorldPrj,编写一个Java程序并运行. 首先要下载eclipse. (注意这里要选一个中国的, ...

  9. idea配置tomcat及中文乱码解决

    放在前面:不要使用tomcat10,访问自己的页面会报404错误,目前无解,在这个坑爬了一下午,最终换了tomcat 9才解决.所以我选择了tomcat 9 + idea 2021.2版本 配置步骤: ...

  10. MongoDB 常见问题 - 解决找不到 mongo、mongod 命令的问题

    问题背景 成功安装 MongoDB 后执行 Mongo.MongoD 显示找不到命令 解决方案 echo 'export PATH="/usr/local/opt/mongodb-commu ...