学习threejs,对模型多个动画切换展示
👨⚕️ 主页: gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏:threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️THREE.AnimationMixer 动画混合器
- 二、🍀对模型多个动画切换展示
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中对模型多个动画切换展示,亲测可用。希望能帮助到您。一起学习,加油!加油!
1.1 ☘️THREE.AnimationMixer 动画混合器
THREE.AnimationMixer动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时,每个对象都可以使用同一个动画混合器。
创建方法:
AnimationMixer( rootObject : Object3D )
rootObject 是 混合器播放的动画所属的对象
属性:
time:Number 全局的混合器时间(单位秒; 混合器创建的时刻记作0时刻)。
timeScale:全局时间(mixer time)的比例因子。
说明: 将混合器的时间比例设为0, 稍后再设置为1,可以暂停/取消暂停由该混合器控制的所有动作。
方法:
clipAction(clip : AnimationClip, optionalRoot : Object3D):AnimationAction 返回所传入的剪辑参数的AnimationAction, 根对象参数可选,默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
如果不存在符合传入的剪辑和根对象这两个参数的动作, 该方法将会创建一个。传入相同的参数多次调用将会返回同一个剪辑实例。
existingAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction 返回传入剪辑的已有AnimationAction, 根对象参数可选,默认值为混合器的默认根对象。
第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
update (deltaTimeInSeconds : Number) : AnimationMixer 推进混合器时间并更新动画。
deltaTimeInSeconds 参数表示当前帧与前一帧之间的时间差(以秒为单位)。
二、🍀对模型多个动画切换展示
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景
- 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
- 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源,初始化THREE.PointLight点光源,设置点光源位置,设置点光源投影,scene添加点光源。
- 5、加载几何模型:创建THREE.AxesHelper坐标辅助工具,创建THREE.PlaneBufferGeometry平面几何体、THREE.GridHelper地板割线,scene场景中加入创建的平面几何体和地板割线。创建gui控件datGui。通过THREE.FBXLoader类加载 ‘Naruto.fbx’ 模型文件mesh,在加载模型的回调函数中,定义mesh动画,datGui加入动画控制。具体实现参考代码样例。
- 6、加入controls控制,加入stats监控器,监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn50(对模型多个动画切换展示)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><!--<script src="lib/js/inflate.min.js"></script>--><script src="lib/threejs/127/three.js-master/examples/js/loaders/FBXLoader.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/fflate.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setPixelRatio(window.devicePixelRatio)renderer.setClearColor(0xeeeeee)renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()scene.backgroundColor = new THREE.Color(0xa0a0a0)scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000)}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)camera.position.set(100, 200, 300)}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 200, 100)light.castShadow = truelight.shadow.camera.top = 180light.shadow.camera.bottom = -100light.shadow.camera.left = -120light.shadow.camera.right = 120scene.add(light)}var gui, datGui, meshHelper, mixervar initGui = () => {gui = {helper: true}datGui = new dat.GUI()datGui.add(gui, 'helper').onChange(e => {meshHelper.visible = e})}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({color: 0xffffff,depthWrite: false}))mesh.receiveShadow = truemesh.rotation.x = -0.5 * Math.PIscene.add(mesh)// var planeGeometry = new THREE.PlaneBufferGeometry(2000, 2000)// var planeMatarial = new THREE.MeshPhongMaterial({// color: 0xffffff,// depthWrite: false// })// var plane = new THREE.Mesh(planeGeometry, planeMatarial)// plane.rotation.x = -0.5 * Math.PI// plane.position.y = -0// plane.receiveShadow = true// scene.add(plane)// 添加地板割线var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000)grid.material.opacity = 0.2grid.material.transparent = truescene.add(grid)var loader = new THREE.FBXLoader()loader.load('data/model/NarutoFbx/Naruto.fbx', mesh => {meshHelper = new THREE.SkeletonHelper(mesh)scene.add(meshHelper)mesh.traverse(child => {if (child.isMesh) {child.castShadow = truechild.receiveShadow = true}})mixer = mesh.mixer = new THREE.AnimationMixer(mesh)var actions = []var animations = datGui.addFolder('animations')var createAction = (i) => {actions[i] = mixer.clipAction(mesh.animations[i])gui['action' + i] = () => {for (var j = 0; j < actions.length; j++) {if (j === i) {actions[j].play()} else {actions[j].stop()}}}animations.add(gui, 'action' + i)}for (var i = 0; i < mesh.animations.length; i++) {createAction(i)}gui.stop = () => {for (var i = 0; i < actions.length; i++) {actions[i].stop()}}datGui.add(gui, 'stop')mesh.position.y += 100scene.add(mesh)})}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var clock = new THREE.Clock()var render = () => {var time = clock.getDelta()if (mixer) {mixer.update(time)}controls.update()}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initGui()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>
效果如下:
相关文章:

学习threejs,对模型多个动画切换展示
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.AnimationMixer 动画…...

【Bug合集】——Java大小写引起传参失败,获取值为null的解决方案
阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:本文面向的人群 二:错误场景引入 三:正确场景引入 四…...

Python爬虫:如何从1688阿里巴巴获取公司信息
在当今的数字化时代,数据已成为企业决策和市场分析的重要资产。对于市场研究人员和企业分析师来说,能够快速获取和分析大量数据至关重要。阿里巴巴的1688.com作为中国最大的B2B电子商务平台之一,拥有海量的企业档案和产品信息。本文将介绍如何…...

单片机学习笔记 2. LED灯闪烁
更多单片机学习笔记:单片机学习笔记 1. 点亮一个LED灯 目录 0、实现的功能 1、Keil工程 2、代码实现 0、实现的功能 LED灯闪烁 1、Keil工程 闪烁原理:需要进行软件延时达到人眼能分辨出来的效果。常用的延时方法有软件延时和定时器延时。此次先进行软…...

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析
折叠光腔衰荡高反射率测量技术的matlab模拟理论分析 1. 前言2. 光腔模型3. 光腔衰荡过程4. 衰荡时间与反射率的关系5. 测量步骤①. 光腔调节:②. 光腔衰荡测量:③. 计算衰荡时间常数:④. 反射率计算: 6. 实际应用中的调整7. 技术优…...

ubuntu 16.04 中 VS2019 跨平台开发环境配置
su 是 “switch user” 的缩写,表示从当前用户切换到另一个用户。 sudo 是 “superuser do” 的缩写,意为“以超级用户身份执行”。 apt 是 “Advanced Package Tool” 的缩写,Ubuntu中用于软件包管理的命令行工具。 1、为 root 用户设置密码…...

C语言第13节:指针(3)
1. 回调函数 回调函数的基本思想是,将函数指针作为参数传递给另一个函数,并在需要时通过这个函数指针调用对应的函数。这种方式允许一个函数对执行的内容进行控制,而不需要知道具体的实现细节。 回调函数在以下场景中尤为有用: …...
java:简单小练习,面积
面积:圆和长方形 接口:实现面积 test:调用 一、interface: 对于接口,它是Java中一个新增的知识点,而C中没有,因为Java有一个缺陷就是不可以实现多继承,只可以单继承,这就限制了有些功能的使…...

@Autowired 和 @Resource思考(注入redisTemplate时发现一些奇怪的现象)
1. 前置知识 Configuration public class RedisConfig {Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template new RedisTemplate<>();template.setConnectionFactory(facto…...
PostgreSQL提取JSON格式的数据(包含提取list指定索引数据)
PostgreSQL提取JSON格式的数据(包含提取list指定索引数据) ->>, ->, #>, #>> 在PostgreSQL中,处理json或jsonb类型数据时,->>, ->, #> 和 #>> 是非常有用的操作符,它们允许你以…...

如何利用谷歌浏览器提高网络安全
在当今数字化时代,网络安全已成为我们不可忽视的重要议题。作为全球最受欢迎的网络浏览器之一,谷歌浏览器不仅提供了快速、便捷的浏览体验,还内置了多种安全功能来保护用户的在线安全。本文将详细介绍如何通过谷歌浏览器提高您的网络安全&…...

go-zero(四) 错误处理(统一响应信息)
go-zero 错误处理(统一响应信息) 在实现注册逻辑时,尝试重复注册可能会返回 400 状态码,显然不符合正常设计思维。我们希望状态码为 200,并在响应中返回错误信息。 一、使用第三方库 1.下载库 目前 go-zero官方的…...
1.1 爬虫的一些知识(大模型提供语料)
1.1 爬虫的一些知识(大模型提供语料) 网页资源: 资源组织方式:列表分页,搜索引擎,推荐 发送请求的文档类型:html ,js 响应请求的文档类型:html,js,json 请求方式:同步和异步 页面形式…...

Linux开发工具:Vim 与 gcc,打造高效编程的魔法双剑
文章目录 一、初识Vim模式 二、vim基本操作2.1基础操作2.2命令模式/正常模式2.2.1光标定位2.2.2复制粘贴、删除2.2.3撤销2.2.4替换字符2.2.5替换模式 2.3底行模式2.3.1退出vim和**保存文件**2.3.2定位文本字符串2.3.3命令2.3.4实现分屏2.3.5替换指定字符串 2.4补充指令2.4.1视图…...

cesium for unity的使用
先聊聊导入 看到这里的因该能够知道,官网以及网上绝大多数的方法都导入不进来,那么解决方法如下: 两个链接:按照顺序依次下载这两个tgz和zip,其中tgz为主要部分,zip为示例工程项目 如果您要查看示例工程项目的话&am…...

Android AOSP 架构和各层次开发内容介绍
一、系统架构总况 官方文档:架构概览 | Android Open Source Project (google.cn)https://source.android.google.cn/docs/core/architecture?hl=zh-cn 下面是Google Android 提供的最新架构层次图: 图. AOSP 的软件堆栈层次 System API 表示仅供合作伙伴和 OEM…...
Kafka 到 Kafka 数据同步
简述 Kafka 为处理实时数据提供了一个统一、高吞吐、低延迟的平台,其持久化层本质上是一个“按照分布式事务日志架构的大规模发布/订阅消息队列”,这使它作为企业级基础设施来处理流式数据非常有价值。因此实现 Kafka 到 Kafka 的数据同步也成了一项重要…...
华为刷题笔记--题目索引
文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分: 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新,订阅防丢失 简单题目 –题目分值试卷1华为OD机…...
osgEarth加载倾斜摄影测量数据
一、代码 // .cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 // #include <osgViewer/Viewer> #include <osgEarth/Notify> #include <osgEarth/EarthManipulator>...

消息推送问题梳理-团队管理
管理用户界面: 新增加用户列表:这些用有资格收到推送消户息 当删除一个医生的时候,重新添加这个人的时候 发现团队中没有这个人了 ,这个时候 需要重新添加这个人。 处理这个问题遵循的原则: 删除这个用户的时候&…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...

CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...