three.js官方案例（animation / multiple）webgl_animation_multiple.html学习笔记

目录

​编辑

1 骨架工具（SkeletonUtils）

 1.1 clone方法

2 蒙皮网格（SkinnedMesh）

3 自测

4 webgl_animation_multiple.html全部脚本

1 骨架工具（SkeletonUtils）

用于操控 Skeleton、 SkinnedMesh、和 Bone 的实用方法。

SkeletonUtils 是一个附加组件，必须显式导入。 See Installation / Addons.

import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';

 1.1 clone方法

//.clone ( object : Object3D ) : Object3D

///克隆给定对象及其后代，确保任何 SkinnedMesh 实例都与其骨骼正确关联。同时，骨骼也会被克隆，且必须是传递给此方法的物体的后代。而其他数据，如几何形状和材料，是通过引用来实现重复使用的

2 蒙皮网格（SkinnedMesh）

  console.log('model：',model);

  console.log('动画：',animations);

3 自测

测试蒙皮网格的一些脚本

只把蒙皮添加到scene里：

把model和蒙皮都添加到scene里：

把骨骼加到场景里

把雾的一行注掉，加上控制器，鼠标滚动视角边远看着是如下图所示：

修正模型大小：

model3.bindMode = THREE.DetachedBindMode;//注掉后模型也会变大

参考博客：

深度解析3D骨骼系统中骨骼运动对几何体顶点运动的影响

介绍了 D骨骼系统中骨骼几何体顶点的影响。

console.log(params);

这里是UI切换时的参数打印

4 webgl_animation_multiple.html全部脚本

<!DOCTYPE html>
<html lang="en"><head><title>Multiple animated skinned meshes</title><meta charset="utf-8"><meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="info">This demo shows the usage of <strong>SkeletonUtils.clone()</strong> and how to setup a shared skeleton.<br/>Soldier model from <a href="https://www.mixamo.com" target="_blank" rel="noopener">https://www.mixamo.com</a>.</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';//gltf模型下载器import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//骨架工具import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';//uiimport { GUI } from 'three/addons/libs/lil-gui.module.min.js';//控制器//控制器import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let camera, scene, renderer, clock;let model, animations;let controls;const mixers = [], objects = [];const params = {sharedSkeleton: false};init();animate();function init() {//相机camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );camera.position.set( 2, 3, - 6 );camera.lookAt( 0, 1, 0 );clock = new THREE.Clock();//场景scene = new THREE.Scene();scene.background = new THREE.Color( 0xa0a0a0 );//scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );//半球光  (不能投射阴影)const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );hemiLight.position.set( 0, 20, 0 );scene.add( hemiLight );//模拟的太阳const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );dirLight.position.set( - 3, 10, - 10 );dirLight.castShadow = true;dirLight.shadow.camera.top = 4;dirLight.shadow.camera.bottom = - 4;dirLight.shadow.camera.left = - 4;dirLight.shadow.camera.right = 4;dirLight.shadow.camera.near = 0.1;dirLight.shadow.camera.far = 40;scene.add( dirLight );// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );// ground 地面const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );mesh.rotation.x = - Math.PI / 2;mesh.receiveShadow = true;scene.add( mesh );const loader = new GLTFLoader();loader.load( 'models/gltf/Soldier.glb', function ( gltf ) {model = gltf.scene;animations = gltf.animations;console.log('model：',model);console.log('动画：',animations);model.traverse( function ( object ) {if ( object.isMesh ) object.castShadow = true;} );setupDefaultScene();//测试// const shareSkinnedMesh = model.getObjectByName( 'vanguard_Mesh' ); //获取蒙皮// const shareSkinnedMesh2 = model.getObjectByName( 'vanguard_visor' ); //获取蒙皮// const sharedSkeleton = shareSkinnedMesh.skeleton; //.skeleton 用于表示蒙皮网格中骨骼的层次结构的Skeleton（骨架）// const sharedParentBone = model.getObjectByName( 'mixamorigHips' );//骨骼// scene.add( sharedParentBone );// model.scale.setScalar( 0.01 );// model.rotation.x = - Math.PI * 0.5;  //这没起作用// scene.add(model);// const model1=shareSkinnedMesh.clone()// model1.bindMode = THREE.DetachedBindMode;// shareSkinnedMesh.clone().position.x=1;// const identity = new THREE.Matrix4();//骨骼的变换// model1.bind( sharedSkeleton, identity );//绑定// model1.position.x = - 2;// model1.scale.setScalar( 0.01 );// model1.rotation.x = - Math.PI * 0.5; //变正常了// scene.add(model1);} );//渲染器renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.shadowMap.enabled = true;document.body.appendChild( renderer.domElement );controls=new OrbitControls(camera, renderer.domElement);window.addEventListener( 'resize', onWindowResize );//UI部分const gui = new GUI();gui.add( params, 'sharedSkeleton' ).onChange( function () {clearScene();//console.log(params);if ( params.sharedSkeleton === true ) {setupSharedSkeletonScene();} else {setupDefaultScene();}} );gui.open();}function clearScene() {for ( const mixer of mixers ) {mixer.stopAllAction();//停止所有动作}mixers.length = 0;//for ( const object of objects ) {scene.remove( object );scene.traverse( function ( child ) {//蒙皮网格 SkinnedMesh//.skeleton 用于表示蒙皮网格中骨骼的层次结构的Skeleton（骨架）//dispose 释放该实例分配的GPU相关资源。每当您的应用程序中不再使用此实例时，请调用此方法if ( child.isSkinnedMesh ) child.skeleton.dispose();} );}}function setupDefaultScene() {// three cloned models with independent skeletons.三个具有单个共享骨架的克隆模型。// each model can have its own animation state  每个模型都可以有自己的动画状态//.clone ( object : Object3D ) : Object3D
//克隆给定对象及其后代，确保任何 SkinnedMesh 实例都与其骨骼正确关联。同时，骨骼也会被克隆，且必须是传递给此方法的物体的后代。而其他数据，如几何形状和材料，是通过引用来实现重复使用的。const model1 = SkeletonUtils.clone( model );const model2 = SkeletonUtils.clone( model );const model3 = SkeletonUtils.clone( model );const model4 = SkeletonUtils.clone( model );model1.position.x = - 2;model2.position.x = 0;model3.position.x = 2;model4.position.z = 2;
//分别获取每个的动画混合器const mixer1 = new THREE.AnimationMixer( model1 );const mixer2 = new THREE.AnimationMixer( model2 );const mixer3 = new THREE.AnimationMixer( model3 );const mixer4 = new THREE.AnimationMixer( model4 );mixer1.clipAction( animations[ 0 ] ).play(); // idlemixer2.clipAction( animations[ 1 ] ).play(); // runmixer3.clipAction( animations[ 3 ] ).play(); // walkmixer4.clipAction( animations[ 2 ] ).play(); //Tposescene.add( model1, model2, model3,model4 );//加到场景里objects.push( model1, model2, model3, model4);mixers.push( mixer1, mixer2, mixer3, mixer4);}function setupSharedSkeletonScene() {// three cloned models with a single shared skeleton. 三个具有单个共享骨架的克隆模型。// all models share the same animation state 。所有模型共享相同的动画状态const sharedModel = SkeletonUtils.clone( model );const shareSkinnedMesh = sharedModel.getObjectByName( 'vanguard_Mesh' ); //获取蒙皮const sharedSkeleton = shareSkinnedMesh.skeleton; //.skeleton 用于表示蒙皮网格中骨骼的层次结构的Skeleton（骨架）const sharedParentBone = sharedModel.getObjectByName( 'mixamorigHips' );//骨骼scene.add( sharedParentBone ); // the bones need to be in the scene for the animation to work 骨骼需要在场景中才能使动画工作const model1 = shareSkinnedMesh.clone();//这里是对蒙皮进行克隆const model2 = shareSkinnedMesh.clone();const model3 = shareSkinnedMesh.clone();const model4 = shareSkinnedMesh.clone();//bindMode表示蒙皮网格 与骷髅共享相同的世界空间model1.bindMode = THREE.DetachedBindMode; 绑定模式model2.bindMode = THREE.DetachedBindMode;model3.bindMode = THREE.DetachedBindMode;//注掉后模型也会变大model4.bindMode = THREE.DetachedBindMode;const identity = new THREE.Matrix4();// 绑定的矩阵model1.bind( sharedSkeleton, identity );//绑定model2.bind( sharedSkeleton, identity );model3.bind( sharedSkeleton, identity );model4.bind( sharedSkeleton, identity );model1.position.x = - 2;model2.position.x = 0;model3.position.x = 2;model4.position.z = 2;// apply transformation from the glTF asset 应用glTF资产的转换model1.scale.setScalar( 0.01 );model1.rotation.x = - Math.PI * 0.5;model2.scale.setScalar( 0.01 );model2.rotation.x = - Math.PI * 0.5;model3.scale.setScalar( 0.01 );model3.rotation.x = - Math.PI * 0.5;model4.scale.setScalar( 0.01 );model4.rotation.x = - Math.PI * 0.5;const mixer = new THREE.AnimationMixer( sharedParentBone );mixer.clipAction( animations[ 1 ] ).play();scene.add( sharedParentBone, model1, model2, model3 , model4);objects.push( sharedParentBone, model1, model2, model3, model4 );mixers.push( mixer );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );const delta = clock.getDelta();for ( const mixer of mixers ) mixer.update( delta );renderer.render( scene, camera );controls.update();}</script></body></html>

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

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

相关文章

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍 前言一.五种IO模型1.IO的本质2.五种IO模型1.五种IO模型2.同步IO与异步IO3.IO效率 二.非阻塞IO1.系统调用介绍2.验证代码 三.select多路转接1.系统调用接口2.写代码 : 基于select的TCP服务器1.封装的Socket接口2.开始写…
阅读更多...
1-Maven-settings配置

1-Maven-settings配置

1-Maven-settings配置 整理下Maven工具的使用。 【本地仓库、私服、镜像仓库、远程仓库、中央仓库】 本文基于阅读其他博客和对公司Maven配置的学习整理出来的。希望通过本此学习能对Maven有个整体性的掌控。 顺序&#xff1a;profile.repository > pom文件中的repository &…
阅读更多...
asp.net core使用httpclient

asp.net core使用httpclient

主要讲解常见的get请求和post请求 GET var client new HttpClient(); //3秒钟不响应就超时 client.TimeoutTimeSpan.FromSeconds(3); using HttpResponseMessage response await client.GetAsync("todos/3"); var jsonResponse await response.Content.ReadAsSt…
阅读更多...
postman测试接口（springboot+shiro）带token也不通的解决方案

postman测试接口（springboot+shiro）带token也不通的解决方案

前几天做项目遇到个问题&#xff0c;在系统可以正常使用的接口&#xff0c;拿postman带token访问时候确一直不通&#xff08;后台返回需要登录的提示信息&#xff09; 但是我明明加了token的呀 打断点发现 subject.isAuthenticated()false 查资料猜测可能是因为请求的安全上…
阅读更多...
全面解析大模型知识与应用

全面解析大模型知识与应用

本文深入探讨了大型机器学习模型&#xff08;大模型&#xff09;的基本概念、发展历程、特点、分类、工作原理、定制与优化方法&#xff0c;以及其在不同领域的应用和部署策略。 文章目录 大模型概述大模型的基本概念大模型的发展历程大模型的特点与分类大模型的核心概念与类型…
阅读更多...
特征提取器笔记：CenterLoss+ArcLoss

特征提取器笔记：CenterLoss+ArcLoss

特征提取器 特征&#xff1a;数据的差异性 一个好的特征提取器&#xff1a;足够的数据量不错的特征提取能力 增强特征提取能力核心是损失 线性函数解决非线性问题解决方式 分为多个线性问题升维 --> 线性不可分转为线性可分激活函数 常见人脸识别损失函数 SoftmaxLos…
阅读更多...
【WP】猿人学_16_js逆向_window蜜罐

【WP】猿人学_16_js逆向_window蜜罐

https://match.yuanrenxue.cn/match/16 抓包分析 荷载一个加密参数&#xff0c;一个时间戳 时间: 2024-06-07 15:52:31时间戳: 1717746751 1717746751000时间戳和现在对得上&#xff0c;直接生成就行。 追栈 追栈找m的生成位置。 点进去打断点&#xff0c;重新点击其他…
阅读更多...
C语言基础——函数

C语言基础——函数

ʕ • ᴥ • ʔ づ♡ど &#x1f389; 欢迎点赞支持&#x1f389; 个人主页&#xff1a;励志不掉头发的内向程序员&#xff1b; 专栏主页&#xff1a;C语言基础&#xff1b; 文章目录 前言 一、函数的概念 二、库函数 2.1 库函数和头文件 2.2 库函数的使用/…
阅读更多...
前端工程化工具系列（七）—— PNPM(v9.2.0)：高性能的 NPM 替代品

前端工程化工具系列（七）—— PNPM(v9.2.0)：高性能的 NPM 替代品

PNPM&#xff08;Performant NPM&#xff09;是一个高效的 NPM 包管理器&#xff0c;它使用硬链接和符号链接来减少磁盘空间的使用&#xff0c;并提高了安装速度。 1. 环境要求 v9 的 PNPM 需要 Node.js v18。 2. 安装 npm i -g pnpm3 基本功能 3.1 安装 NPM 包 安装单个…
阅读更多...
出售iPhone前的必做步骤：完全擦除个人数据的方法

出售iPhone前的必做步骤：完全擦除个人数据的方法

当您准备在闲鱼上转售旧 iPhone、将其捐赠、送给朋友或通过 Apple 回收之前&#xff0c;您可能会选择执行“恢复”操作来擦除您的数据。但请注意&#xff0c;这一操作并不能真正删除设备中的数据。被“删除”或“格式化”的数据实际上仍存在于 iPhone 中&#xff0c;只是被系统…
阅读更多...
CSS自定义属性

CSS自定义属性

CSS自定义属性&#xff0c;更常被称为CSS变量&#xff0c;它允许我们赋予某一值一个特定的语义名称&#xff0c;然后在整个样式表中反复使用&#xff0c;无论是全局还是局部。接下来&#xff0c;让我们深入探索它的运作方式和使用场景。 1. 定义CSS自定义属性 CSS自定义属性的…
阅读更多...
【TVM 教程】编译 PyTorch 目标检测模型

【TVM 教程】编译 PyTorch 目标检测模型

本文介绍如何用 Relay VM 部署 PyTorch 目标检测模型。 首先应安装 PyTorch。此外&#xff0c;还应安装 TorchVision&#xff0c;并将其作为模型合集&#xff08;model zoo&#xff09;。 可通过 pip 快速安装&#xff1a; pip install torch pip install torchvision或参考…
阅读更多...
SpringBoot+Vue在线文档管理系统（前后端分离）

SpringBoot+Vue在线文档管理系统（前后端分离）

技术栈 JavaSpringBootMavenMySQLMyBatisVueShiroElement-UI 系统角色对应功能 员工管理员 系统功能截图
阅读更多...
《精通ChatGPT：从入门到大师的Prompt指南》第1章：认识ChatGPT

《精通ChatGPT：从入门到大师的Prompt指南》第1章：认识ChatGPT

第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 ChatGPT&#xff0c;全称为Chat Generative Pre-trained Transformer&#xff0c;是由OpenAI开发的一种先进的自然语言处理模型。它利用了深度学习中的一种技术——Transformer架构&#xff0c;来生成类人文本。ChatGPT通过对…
阅读更多...
贪心算法-数组跳跃游戏(mid)

贪心算法-数组跳跃游戏(mid)

目录 一、问题描述 二、解题思路 1.回溯法 2.贪心算法 三、代码实现 1.回溯法实现 2.贪心算法实现 四、刷题链接 一、问题描述 二、解题思路 1.回溯法 使用递归的方式&#xff0c;找到所有可能的走步方式&#xff0c;并记录递归深度&#xff08;也就是走步次数&#x…
阅读更多...
玩转ChatGPT：最全学术论文提示词分享【上】

玩转ChatGPT：最全学术论文提示词分享【上】

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 在当今数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正迅速改变各行各业的运作方式。特别是&#xff0c;OpenAI的ChatGPT等语言模型以其强大的文本生成能力&#xff0c;…
阅读更多...
使用Ant-Design-Vue实现动态表头与数据填充的实战指南

使用Ant-Design-Vue实现动态表头与数据填充的实战指南

好的&#xff0c;我将为你写一篇关于如何使用Ant-Design-Vue动态生成表头并填充数据的文章。这篇文章将包括一个基本的介绍&#xff0c;详细的步骤和示例代码&#xff0c;以帮助你实现这一功能。 --- # 使用Ant-Design-Vue动态生成表头并填充数据 在现代前端开发中&#xff…
阅读更多...
Android ViewPager和ViewPager2的区别

Android ViewPager和ViewPager2的区别

一、实现方式 ViewPager内部是通过继承ViewGroup来实现的&#xff0c;ViewPager2内部是通过RecyclerView来实现的&#xff08;效率更高&#xff09; 二、支持方向 ViewPager只能横向滑动&#xff0c;ViewPager2可以横向以及竖向滑动 三、采用的适配器 ViewPager有两个适配…
阅读更多...
算法：70. 爬楼梯

算法：70. 爬楼梯

70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示…
阅读更多...
【CTF MISC】XCTF GFSJ0170 János-the-Ripper Writeup（文件提取+ZIP压缩包+暴力破解）

【CTF MISC】XCTF GFSJ0170 János-the-Ripper Writeup（文件提取+ZIP压缩包+暴力破解）

Jnos-the-Ripper 暂无 解法 用 winhex 打开&#xff0c;提到了 flag.txt。 用 binwalk 扫描&#xff0c;找到一些 zip 压缩包。 binwalk misc100用 foremost 提取文件。 foremost misc100 -o 100flag.txt 在压缩包里。 但是压缩包需要解压密码。 用 Ziperello 暴力破解。 不…
阅读更多...
最新文章

Copyright @ 2022~2023