Threejs播放模型自带动画

        现在的很多建模软件都可以制作动画效果,甚至可以通过各种动画效果直接做动漫,动漫是模型的一种属性,在threejs中同样可以加载此动画,实现动画效果,如果有的时候在threejs中用代码实现模型动画比较困难或者麻烦,可以在模型中做好动画,然后在threejs中通过代码播放此动画来实现,

如果想看一个模型有几个动画可以在加载模型后打印出来明细查看

 const loader = new GLTFLoader()loader.load("/static/cartoon/scene.gltf", (gltf) => {this.women = gltf.scene;this.women.position.set(0, 0, 0)   // 模型位置this.women.scale.set(1,1,1)scene.add(this.women)   // 加入场景console.log(gltf)
})

如图,这里的animations就是动画集合,这里可以看到此模型有1个动画,

        但是此时只是把模型加载进去不会自动播放模型自带的动画,只是一个静止的模型而已,需要动画播放需要加载动画并播放。

        然后根据这个动画调用动画的组件去播放这部分在之前的关键帧动画中有相关用到,这里是模型自带的就不需要做动画设置了

initRound(){//在场景中加载一个agv小车,并将agv小车放在曲线的第一个点上const loader = new GLTFLoader()loader.load("/static/cartoon/scene.gltf", (gltf) => {this.women = gltf.scene;this.women.position.set(0, 0, 0)   // 模型位置this.women.scale.set(1,1,1)scene.add(this.women)   // 加入场景console.log(gltf)this.mixer = new THREE.AnimationMixer(this.women);const action = this.mixer.clipAction(gltf.animations[0])//把该物体需要的动画拿出来action.setLoop(THREE.LoopOnce);//设置只播放一次,THREE.LoopRepeat设置播放多次action.play();})},

同时也还是要在最后渲染的时候不断更新动画

initAnimate() {if(this.mixer){this.mixer.update(0.0166666666);//这里给动画设置更新速度,因为默认是一秒钟渲染60次,所以这里设置为1/60的值,}requestAnimationFrame(this.initAnimate);this.renderer.render(scene, this.camera);},

完整的代码如下:

<template><div><div id="container"></div></div>
</template><script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader";let scene;
export default {name: "agv-single",data() {return{camera:null,cameraCurve:null,renderer:null,container:null,controls:null,pathIndex:0,//小车的运动轨迹点索引women:null,mixer:null,}},methods:{initScene(){scene = new THREE.Scene();},initCamera(){this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(10,10,10);},initLight(){//添加两个平行光const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight1.position.set(-300,-300,600)scene.add(directionalLight1);const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight2.position.set(600,200,600)scene.add(directionalLight2);},initRound(){//在场景中加载一个agv小车,并将agv小车放在曲线的第一个点上const loader = new GLTFLoader()loader.load("/static/cartoon/scene.gltf", (gltf) => {this.women = gltf.scene;this.women.position.set(0, 0, 0)   // 模型位置this.women.scale.set(1,1,1)scene.add(this.women)   // 加入场景console.log(gltf)this.mixer = new THREE.AnimationMixer(this.women);const action = this.mixer.clipAction(gltf.animations[0])//把该物体需要的动画拿出来action.setLoop(THREE.LoopOnce);//设置只播放一次,THREE.LoopRepeat设置播放多次action.play();})},initRenderer(){this.renderer = new THREE.WebGLRenderer({ antialias: true });this.container = document.getElementById("container")this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);this.renderer.setClearColor('#AAAAAA', 1.0);this.container.appendChild(this.renderer.domElement);},initControl(){this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度},initAnimate() {if(this.mixer){this.mixer.update(0.0166666666);//这里给动画设置更新速度,因为默认是一秒钟渲染60次,所以这里设置为1/60的值,}requestAnimationFrame(this.initAnimate);this.renderer.render(scene, this.camera);},initPage(){this.initScene();this.initCamera();this.initLight();this.initRenderer();this.initControl();this.initRound();this.initAnimate();}},mounted() {this.initPage()}
}
</script><style scoped>
#container{position: absolute;width:100%;height:100%;overflow: hidden;
}</style>

效果如下:

模型自带动画

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

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

相关文章

MongoDB聚合运算符:$denseRank

$denseRank聚合运算符返回在$setWindowFields阶段分区中文档的排名&#xff0c;排名的顺序由$setWindowFields阶段sortBy的字段值决定。 语法 { $denseRank: { } }$denseRank不需要任何参数。 使用 $rank和$denseRank的不同点在于他们处理排序字段重复值的方式不同&#xf…

嵌入式、开发板 智能音响 OpenHarmony GPT 大模型 智能硬件

一、概述 生活场景的引入: 物联网的快速发展,各种智能设备层出不穷,作为极客,家里早已安上了用 APP 控制的智能灯、智能插座,刚刚安装上的时候,还有新鲜感,久了之后,是不是会有这样的现象: 早上醒来要开灯,需要经过: 迷迷糊糊从床头柜上摸到手机手机用指纹解锁连接无…

3.11 log | 739. 每日温度,

739. 每日温度&#xff0c;496.下一个更大元素 I&#xff0c;503.下一个更大元素II&#xff0c; class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {stack<int> st;vector<int> result(temperatures.size(),0)…

Hadoop学习1:概述、单体搭建、伪分布式搭建

文章目录 概述基础知识Hadoop组件构成Hadoop配置文件 环境准备配置Hadoop配置下载配置环境变量 Hadoop运行模式Standalone Operation&#xff08;本地&#xff09;官方DemoWordCount单词统计Demo Pseudo-Distributed Operation&#xff08;伪分布式模式&#xff09;配置修改启动…

Bootstrap5(display显示、flex布局相关属性、浮动、定位、文本、栅格系统)

类中缀的设置技巧 1.当多个连续品目使用一个样式时&#xff0c;则给最小的设置即可。 比如&#xff1a;大屏以上内边距都是3&#xff1a;p-lh-3 2.超小屏不设置类中缀的样式 比如超小屏内边距时1&#xff0c;小屏内边距时2&#xff0c;中屏及以上内边距是3 p-1 p-sm-2 p-md-3 …

WPF 界面刷新问题 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改

WPF 界面刷新问题 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改 问题描述&#xff1a; 在子线程中操作界面控件的数据源出现以下错误&#xff1a;System.NotSupportedException:“该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCo…

【Python】新手入门学习:什么是相对路径?

【Python】新手入门学习&#xff1a;什么是相对路径&#xff1f; &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得…

【Echarts】柱状图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《前端》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握…

linux 环境安装nvm

linux 环境安装nvm 1、安装方式 # 方式1 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 方式2 【推荐】 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash2、创建nvm命令目录 mkdir -p ~/.nvm3、编…

StringBuilder --java学习笔记

StringBuilder 代表可变字符串对象&#xff0c;相当于是一个容器&#xff0c;它里面装的字符串是可以改变的&#xff0c;就是用来操作字符串的StringBuilder比String更适合做字符串的修改操作&#xff0c;效率会更高&#xff0c;代码也会更简洁 StringBuilder的常用构造器和方…

C++操作树莓派的RTC时钟

概述 RTC实时时钟通常是指一个集成电路&#xff0c;RTC本质上是一个独立的定时器&#xff0c;通常情况下需要外接一个32.768KHZ的晶振和匹配电容&#xff08;10~33pf&#xff09;&#xff0c;由于时间是不停止的&#xff0c;为了满足这一要求&#xff0c;所以RTC实时时钟有两种…

idea2023和历史版本的下载

1.idea中文官网 idea官网历史版本下载(https://www.jetbrains.com.cn/idea/download/other.html)

基于SpringBoot的“学生成绩管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“学生成绩管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面图 管理员功能界面图 学生管理界面图…

蓝桥杯2019年第十届省赛真题-修改数组

查重类题目&#xff0c;想到用标记数组记录是否出现过 但是最坏情况下可能会从头找到小尾巴&#xff0c;时间复杂度O(n2)&#xff0c;数据范围106显然超时 再细看下题目&#xff0c;我们重复进行了寻找是否出现过&#xff0c;干脆把每个元素出现过的次数k记录下来&#xff0c;直…

做抖音小店有何秘诀?2步提高流量和转化率,行业秘诀分享!

大家好&#xff0c;我是电商花花。 我们做抖音小店&#xff0c;最重要的就两点&#xff0c;一个是店铺的流量&#xff0c;一个是店铺的转化率。 店铺想要出单&#xff0c;赚钱&#xff0c;必然是离不开店铺的流量和转化率了&#xff0c;但是如何让流量变成销量这才是需要我们…

redis概述和安装

1 、redis概述和安装 1.1、安装redis 1. 下载redis2. 地址 : https://download.redis.io/releases/ 3. 选择需要的版本1.2 将 redis 安装包拷贝到 /opt/ 目录 1.3. 解压 tar -zvxf redis-6.2.1.tar.gz1.4. 安装gcc yum install gcc1.5. 进入目录 cd redis-6.2.11.6 编译 …

Linux第76步_“gpio子系统”下的LED驱动

使用新字符设备驱动的一般模板和“gpio子系统”&#xff0c;以及设备树&#xff0c;驱动LED。 1、添加“gpio_led”节点 打开虚拟机上“VSCode”&#xff0c;点击“文件”&#xff0c;点击“打开文件夹”&#xff0c;点击“zgq”&#xff0c;点击“linux”&#xff0c;点击“…

[零声教育] C++高性能日志课程总结

高性能日志 1 数据肯定是批量写入的 如果数据单笔写入会造成 磁盘寻址、频繁用户态/内核态的切换 &#xff08;耗时&#xff09; 2 fwrite/write 的区别 fwrite() 是C标准库中的函数&#xff0c;而 write() 是系统调用接口。fwrite底层也是通过write来实现的。 二者均都有缓冲…

重学SpringBoot3-ErrorMvcAutoConfiguration类

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 重学SpringBoot3-ErrorMvcAutoConfiguration类 ErrorMvcAutoConfiguration类的作用工作原理定制 ErrorMvcAutoConfiguration示例代码1. 添加自定义错误页面2.自定义错误控制器3. ErrorAttributes定制错误信息 结…

Java学习记录(十七)IO流(三)

转换流&#xff08;在字节流中想使用字符流的方法时使用&#xff09; 转换流是字节流和字符流之间的桥梁&#xff0c;转换流本身其实就是字符流所以可以使用字符流里的相关方法&#xff0c;通过InputStreamReader字符转换输入流能将字节流转化为字符流输入到内存中&#xff0c…