Three 之 Animation 初印象
Animation 初印象
动画效果
播放动画需要基本元素
AnimationMixer
一个对象所有动作的管理者
用于场景中特定对象的动画的播放器。一个对象可能有多个动作,Mixer 是用来管理所有动作的,它可以调度出对象的某个动作进行操控,如 mixer = new THREE.AnimationMixer(obj);
mixer 就能管理 obj 对象的所有动画了。拥有 mixer 后,在 animate 函数中进行更新操作,用于更新该对象目前的状态。 mixer 可以让这个对象同时播放多个动作,因此需要在每帧中执行 update 方法
AnimationClip
一个对象的一个动作
动画剪辑(AnimationClip)是一个可重用的关键帧轨道集,它代表动画。
AnimationAction
用来管理单个动作,让这个动作开始暂停等等
AnimationActions 用来调度存储在 AnimationClips 中的动画。说明: AnimationAction的大多数方法都可以链式调用
使用方法
- 加载一个对象,加载这个对象对应的 mixer 用于管理所有动作
mixer = new THREE.AnimationMixer(obj);
- 加载出一个 action,用于处理单个(clip)动画集,并进行播放
mixer.clipAction(obj.animations[0]).play();
上文提到过 action 是可以链式操作了,clipAction 方法返回一个 action 对象
- 在每一帧中更新对象的状态
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 初印象的更多相关文章
- Vue.js之初印象
一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...
- Django初印象之视图(view)
一.view的初印象 一个视图函数(类),简称视图.我们发起web请求时,返回的web响应.[大家约定成俗将视图放置在项目(project)或应用程序(app)目录中的名为views.py的文件中.] ...
- 初印象至Vue路由
初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...
- OpenCL学习笔记(一):摩尔定律,异构计算与OpenCL初印象
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 关于摩尔定律: 摩尔定律19 ...
- [强化学习]Part1:强化学习初印象
引入 智能 人工智能 强化学习初印象 强化学习的相关资料 经典书籍推荐:<Reinforcement Learning:An Introduction(强化学习导论)>(强化学习教父Ric ...
- css Animation初体验
目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中 ...
- [置顶]
Retrofit2 初印象?
鄙人由于工作繁忙很久没写博客了还望大家谅解!之前csdn登不上,算了不说借口了,retrofit2相信已经很火了吧,而且上手也比较容易,之前可能大家都是用Volley,Okhttp.Okhttp3其实 ...
- AngularJS 初印象------对比 Asp.net MVC
之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了解,也不解为什么前端也要这么分.这两天看了AngularJs的官方教 ...
- Web API初印象
理解REST,RESTful和Web API 1.REST:Representational State Transfer表征状态转移,是Roy Fielding博士在2000年他的博士论文中提出来的 ...
随机推荐
- 分布式链路追踪系统Sleuth和ZipKin
1.微服务下的链路追踪讲解和重要性 简介:讲解什么是分布式链路追踪系统,及使用好处 进行日志埋点,各微服务追踪. 2.SpringCloud的链路追踪组件Sleuth 1.官方文档 http://cl ...
- jQuery中获取属性值:attr()、html()、text()、val()等(一)
<!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...
- 多线程编程<二>
wait()与notify(): 1 public class ThreadComDemo { 2 public static void main(String[] args) { 3 try { 4 ...
- Flink Streaming状态处理(Working with State)
参考来源: https://www.jianshu.com/p/6ed0ef5e2b74 https://blog.csdn.net/Fenggms/article/details/102855159 ...
- 战胜了所有对手,却输给了时代。MVVM--jQuery永远的痛。
前言 第二次浏览器战争中,随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧,浏览器碎片化问题越来越严重,不同的浏览器执行不同的标准,对于开发人员来说这是一个恶梦.为 ...
- 高德地图&兴趣点(poi)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 接口自动化-python+requests+pytest+csv+yaml
本套代码和逻辑 是本人的劳动成果,如果有转载需要标注, 非常适合公司做项目的同学!!!小白也可以学哦! 1.项目目录 2.公共方法的封装 2.1如果不用配置文件 可以使用这个方法进行封装--但是有一 ...
- 假期作业03:使用IDE开发你的Java程序
假期作业03:使用IDE开发你的Java程序 一.使用Eclipse创建一个Java项目HelloWorldPrj,编写一个Java程序并运行. 首先要下载eclipse. (注意这里要选一个中国的, ...
- idea配置tomcat及中文乱码解决
放在前面:不要使用tomcat10,访问自己的页面会报404错误,目前无解,在这个坑爬了一下午,最终换了tomcat 9才解决.所以我选择了tomcat 9 + idea 2021.2版本 配置步骤: ...
- MongoDB 常见问题 - 解决找不到 mongo、mongod 命令的问题
问题背景 成功安装 MongoDB 后执行 Mongo.MongoD 显示找不到命令 解决方案 echo 'export PATH="/usr/local/opt/mongodb-commu ...