学习threejs，通过SkinnedMesh来创建骨骼和蒙皮动画

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.SkinnedMesh 蒙皮网格
  • 二、🍀通过SkinnedMesh来创建骨骼和蒙皮动画
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中通过SkinnedMesh来创建骨骼和蒙皮动画，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.SkinnedMesh 蒙皮网格

THREE.SkinnedMesh具有Skeleton（骨架）和bones（骨骼）的网格，可用于给几何体上的顶点添加动画。 其材质必须支持蒙皮，并且已经启用了蒙皮
创建方法：
SkinnedMesh( geometry : BufferGeometry, material : Material )
geometry：一个BufferGeometry实例。
material：（可选）一个Material实例，默认值是一个新的MeshBasicMaterial。
属性：
bindMode：string “attached”（附加）或者“detached”（分离）。“attached”使用SkinnedMesh.matrixWorld 属性作为对骨骼的基本变换矩阵，“detached”则使用SkinnedMesh.bindMatrix。 默认值是“attached”。
bindMatrix：Matrix4 该基础矩阵用于绑定骨骼的变换。
bindMatrixInverse：Matrix4 该基础矩阵用于重置绑定骨骼的变换。
isSkinnedMesh：用于检查这个类或者其派生类是否为蒙皮网格，默认值为true。
skeleton：用于表示蒙皮网格中骨骼的层次结构的Skeleton（骨架）。
方法：
（1）bind ( skeleton : Skeleton, bindMatrix : Matrix4 )：null
skeleton —— 由一棵Bones树创建的Skeleton。
bindMatrix —— 表示骨架基本变换的Matrix4（4x4矩阵）。
将骨架绑定到一个蒙皮网格上。bindMatrix会被保存到.bindMatrix属性中，其逆矩阵.bindMatrixInverse也会被计算出来。
（2）clone () : SkinnedMesh
返回当前SkinnedMesh对象的一个克隆及其任何后代。
（3）normalizeSkinWeights () : null
标准化蒙皮的权重。
（4）pose ()：null
这个方法设置了在“休息”状态下蒙皮网格的姿势（重置姿势）。
（5）updateMatrixWorld ( force : Boolean ) ：null
更新MatrixWorld矩阵。

二、🍀通过SkinnedMesh来创建骨骼和蒙皮动画

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.PointLight点光源，设置点光源位置，设置点光源投影，scene添加点光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.JSONLoader加载器加载hand1.js json模型文件，生成geometry几何体，根据生成的几何体创建THREE.SkinnedMesh蒙皮网格，设置mesh的旋转角度和位置。传入参数mesh创建THREE.SkeletonHelper可视化骨骼结构对象skeletonHelper。场景scene中加入mesh和skeletonHelper。创建间隔动画initTween，定义mesh的骨骼和蒙皮动画。具体代码参考代码样例。
  • 6、加入controls、gui控制（控制skeletonHelper的显示、隐藏和动画的播放），加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn49(通过SkinnedMesh来创建骨骼和蒙皮动画)</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/threejs/91/three.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><script src="https://cdn.bootcss.com/tween.js/r14/Tween.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.setSize(window.innerWidth, window.innerHeight)renderer.setClearColor(0xeeeeee)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 50)}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.PointLight(0xffffff)light.position.set(0, 50, 0)light.castShadow = truescene.add(light)}var mesh, tween, skeletonHelpervar initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var loader = new THREE.JSONLoader()loader.load('data/model/hand1/hand1.js', geometry => {mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshLambertMaterial({color: 0xf4b397,skinning: true}))mesh.rotation.x = 0.5 * Math.PImesh.rotation.z = 0.7 * Math.PImesh.scale.set(10, 10, 10)skeletonHelper = new THREE.SkeletonHelper(mesh)skeletonHelper.visible = falsescene.add(skeletonHelper)scene.add(mesh)tween.start()})}var initTween = () => {tween = new TWEEN.Tween({pos: -1}).to({pos: 0}, 3000).easing(TWEEN.Easing.Cubic.InOut).yoyo(true).repeat(Infinity) //一直循环tween.onUpdate(function () {var pos = this.pos// 旋转手指的方向mesh.skeleton.bones[5].rotation.set(0, 0, pos)mesh.skeleton.bones[6].rotation.set(0, 0, pos)mesh.skeleton.bones[10].rotation.set(0, 0, pos)mesh.skeleton.bones[11].rotation.set(0, 0, pos)mesh.skeleton.bones[15].rotation.set(0, 0, pos)mesh.skeleton.bones[16].rotation.set(0, 0, pos)mesh.skeleton.bones[20].rotation.set(0, 0, pos)mesh.skeleton.bones[21].rotation.set(0, 0, pos)// 旋转手腕mesh.skeleton.bones[1].rotation.set(pos, 0, 0)})}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 gui, animation = truevar initGui = () => {gui = {animation: true,helper: false}var datGui = new dat.GUI()datGui.add(gui, 'animation').onChange(e => {animation = e})datGui.add(gui, 'helper').onChange(e => {skeletonHelper.visible = e})}var render = () => {animation && TWEEN.update()controls.update()}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var draw = () => {if (!Detector.webgl) Detector.addGetWebGLMessage()initRender()initScene()initCamera()initLight()initModel()initControls()initStats()initGui()initTween()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

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

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

相关文章

移门缓冲支架的工作原理

移门缓冲支架的工作原理

移门缓冲支架是一种安装在滑动门上的装置&#xff0c;主要用于吸收门关闭时的冲击力&#xff0c;防止门突然停止时的震动&#xff0c;从而保护门体、轨道和墙体。 1. 液压缓冲液压缓冲支架利用液体通过狭窄通道时产生的阻力来减缓门的运动。当门关闭时&#xff0c;液压油被迫通…
阅读更多...
MySQL 日志 主从复制

MySQL 日志 主从复制

1. 日志 学习链接&#xff0c;click mysql中有4种日志&#xff1a; 错误日志二进制日志查询日志慢查询日志 1.1 错误日志 错误日志是MySQL中最重要的日志之一&#xff0c;它记录了当mysqld启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当…
阅读更多...
《设计模式》创建型模式总结

《设计模式》创建型模式总结

目录 创建型模式概述 Factory Method: 唯一的类创建型模式 Abstract Factory Builder模式 Prototype模式 Singleton模式 最近在参与一个量化交易系统的项目&#xff0c;里面涉及到用java来重构部分vnpy的开源框架&#xff0c;因为是框架的搭建&#xff0c;所以会涉及到像…
阅读更多...
【支持向量机（SVM）】：相关概念及API使用

【支持向量机（SVM）】：相关概念及API使用

文章目录 1 SVM相关概念1.1 SVM引入1.1.1 SVM思想1.1.2 SVM分类1.1.3 线性可分、线性和非线性的区分 1.2 SVM概念1.3 支持向量概念1.4 软间隔和硬间隔1.5 惩罚系数C1.6 核函数 2 SVM API使用2.1 LinearSVC API 说明2.2 鸢尾花数据集案例2.3 惩罚参数C的影响 1 SVM相关概念 1.1…
阅读更多...
某校园网登录界面前端加密绕过

某校园网登录界面前端加密绕过

前言 尝试对学校校园网登录框进行爆破&#xff0c;发现密码在前端被加密了 Burp抓包 抓包信息 DDDDD2022***&upass3d5c84b6fb1dc75987884f39c05b0e6a123456782&R10&R21&para00&0MKKey123456&v6ip From表单提交上来的文本这些参数&#xff0c;DDDD是…
阅读更多...
网络基础(3)https和加密

网络基础(3)https和加密

http其它的报头 直接看图片&#xff1a; 上图中的第一个和第二个类型之前已经使用过了也就不多做说明了&#xff0c;第三个报头类型使用的很少了。第四个报头类型主要就使用在一些灰度更新的应用上&#xff0c;确定用户使用的软件的版本不让其访问该版本不能访问的功能。下一个…
阅读更多...
macOS 的目录结构

macOS 的目录结构

文章目录 根目录 (/)常见目录及其用途示例目录结构注意事项根目录 (/)主要目录及其含义其他目录总结 macOS 的目录结构无论是在 Intel 架构还是 ARM 架构的 Mac 电脑上都是相同的。macOS 的目录结构遵循 Unix 和 BSD 的传统&#xff0c;具有许多标准目录。以下是一些主要目录及…
阅读更多...
【WPF】Prism学习（八）

【WPF】Prism学习（八）

Prism Dependency Injection 1.处理解析错误 1.1. 处理解析错误&#xff1a; 这个特性是在Prism 8中引入的&#xff0c;如果你的应用目标是早期版本&#xff0c;则不适用。 1.2. 异常发生的原因&#xff1a; 开发者可能会遇到多种原因导致的异常&#xff0c;常见的错误包括…
阅读更多...
集群聊天服务器(11)客户端开发

集群聊天服务器(11)客户端开发

目录 首页面功能开发添加好友和聊天帮助和添加好友聊天功能创建群组添加群组群组聊天退出 测试问题一对一聊天第一次发送两个离线消息只收到一个创建和加入群组 首页面功能开发 #include "json.hpp" #include <iostream> #include <thread> #include &l…
阅读更多...
Pytest-Bdd-Playwright 系列教程（10）：配置功能文件路径 优化场景定义

Pytest-Bdd-Playwright 系列教程（10）：配置功能文件路径 优化场景定义

Pytest-Bdd-Playwright 系列教程&#xff08;10&#xff09;&#xff1a;配置功能文件路径 & 优化场景定义 前言一、功能文件路径的配置1.1 全局设置功能文件路径1.2. 在场景中覆盖路径 二、避免重复输入功能文件名2.1 使用方法2.2 functools.partial 的背景 三、应用场景总…
阅读更多...
Cyberchef使用功能之-多种压缩/解压缩操作对比

Cyberchef使用功能之-多种压缩/解压缩操作对比

cyberchef的compression操作大类中有大量的压缩和解压缩操作&#xff0c;每种操作的功能和区别是什么&#xff0c;本章将进行讲解&#xff0c;作为我的专栏《Cyberchef 从入门到精通教程》中的一篇&#xff0c;详见这里。 关于文件格式和压缩算法的理论部分在之前的文章《压缩…
阅读更多...
Leetcode 回文数

Leetcode 回文数

下面是解决这个回文数问题的一个Java解法&#xff1a; 代码解释 特殊情况处理&#xff1a; 如果数字是负数&#xff0c;直接返回false&#xff0c;因为负数不可能是回文数。如果数字以0结尾&#xff0c;但不是0本身&#xff0c;也不可能是回文数&#xff08;例如10不是回文数…
阅读更多...
笔记02----重新思考轻量化视觉Transformer中的局部感知CloFormer（即插即用）

笔记02----重新思考轻量化视觉Transformer中的局部感知CloFormer（即插即用）

1. 基本信息 论文标题: 《Rethinking Local Perception in Lightweight Vision Transformer》中文标题: 《重新思考轻量化视觉Transformer中的局部感知》作者单位: 清华大学发表时间: 2023论文地址: https://arxiv.org/abs/2303.17803代码地址: https://github.com/qhfan/CloF…
阅读更多...
JVM垃圾回收详解（重点）

JVM垃圾回收详解（重点）

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时&#xff0c;Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收 Java 堆是垃圾收集器管理的主要区域&#xff0c;因此也被称作 GC 堆&#xff08;Garbage Collected Heap&…
阅读更多...
深入探索Python集合（Set）的高效应用：数据处理、性能优化与实际案例分析

深入探索Python集合（Set）的高效应用：数据处理、性能优化与实际案例分析

文章目录 前言&#x1fa81;一、 定义集合1.1 使用大括号 {} 定义集合1.2 使用 set() 函数定义集合 &#x1fa81;二、添加元素2.1 使用 add() 方法2.2 使用 update() 方法 &#x1fa81;三、移除元素3.1 使用 remove() 方法3.2 使用 discard() 方法3.3 使用 pop() 方法3.4 使用…
阅读更多...
STM32单片机CAN总线汽车线路通断检测-分享

STM32单片机CAN总线汽车线路通断检测-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着汽车电子技术的不断发展&#xff0c;车辆通信接口在汽车电子控…
阅读更多...
NIST 发布后量子密码学转型战略草案

NIST 发布后量子密码学转型战略草案

美国国家标准与技术研究所 (NIST) 发布了其初步战略草案&#xff0c;即内部报告 (IR) 8547&#xff0c;标题为“向后量子密码标准过渡”。 该草案概述了 NIST 从当前易受量子计算攻击的加密算法迁移到抗量子替代算法的战略。该草案于 2024 年 11 月 12 日发布&#xff0c;开放…
阅读更多...
Javaweb梳理17——HTMLCSS简介

Javaweb梳理17——HTMLCSS简介

Javaweb梳理17——HTML&CSS简介 17 HTML&CSS简介17.1 HTML介绍17.2 快速入门17.3 基础标签17.3 .1 标题标签17.3.2 hr标签17.3.3 字体标签17.3.4 换行17.3.8 案例17.3.9 图片、音频、视频标签17.3.10 超链接标签17.3.11 列表标签17.3.12 表格标签17.3.11 布局标签17.3.…
阅读更多...
【支持向量机（SVM）】：算法原理及核函数

【支持向量机（SVM）】：算法原理及核函数

文章目录 1 SVM算法原理1.1 目标函数确定1.2 约束条件优化问题转换1.3 对偶问题转换1.4 确定超平面1.5 计算举例1.6 SVM原理小节 2 SVM核函数2.1 核函数的作用2.2 核函数分类2.3 高斯核函数2.3 高斯核函数API2.4 超参数 γ \gamma γ 1 SVM算法原理 1.1 目标函数确定 SVM思想…
阅读更多...
mysql bin log分析

mysql bin log分析

centos7 部署collabora office (yum版 与 docker)_collabora office部署-CSDN博客 1.下载polardb的bin log文件 show binary logs; mysqlbinlog -u 用户名 -p -h 地址 --read-from-remote-server --raw mysql-bin.001768 mysqlbinlog --no-defaults --databasexxx --base64-…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023