Threejs 导入动态模型

Threejs 动画模型

GLTF加载器（GLTFLoader）

glTF（gl传输格式）是一种开放格式的规范（open format specification），用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景，包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

const loader = new GLTFLoader();

点击查看：例子

导入兔子模型

       const loader = new GLTFLoader();//兔子loader.load(Rabbit1, //import 兔子模型function (gltf) {console.log('兔子1', gltf);gltf.scene.scale.set(10, 10, 10);gltf.scene.position.set(10, 7, -125);gltf.scene.rotation.y = - 4;mixer = startAnimation( // 执行动画操作gltf.scene,gltf.animations,gltf.animations[3].name);scene.add(gltf.scene);animate();},);

打印查看兔子模型的动画有哪些：

通过startAnimation()执行动画操作：

function startAnimation(skinnedMesh, animations, animationName) {const m_mixer = new THREE.AnimationMixer(skinnedMesh);const clip = THREE.AnimationClip.findByName(animations, animationName);if (clip) {const action = m_mixer.clipAction(clip);action.play();}return m_mixer;};

AnimationMixer

动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。

AnimationMixer( rootObject : Object3D )

rootObject - 混合器播放的动画所属的对象
time - 全局的混合器时间
timeScale - 全局时间(mixer time)的比例因子

一些方法：

.clipAction (clip : AnimationClip, optionalRoot : Object3D) ：返回所传入的剪辑参数的AnimationAction, 根对象参数可选，默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
.existingAction (clip : AnimationClip, optionalRoot : Object3D) ：返回传入剪辑的已有AnimationAction, 根对象参数可选，默认值为混合器的默认根对象。
.getRoot () ：返回混合器的根对象
.stopAllAction () ：停用混合器上所有预定的动作
.update (deltaTimeInSeconds : Number) ：推进混合器时间并更新动画
.setTime (timeInSeconds : Number) ：设置全局混合器到一个给定的时间，并相应地更新动画。
.uncacheClip (clip : AnimationClip)：释放剪辑的所有内存资源
.uncacheRoot (root : Object3D) ：释放根对象的所有内存资源
.uncacheAction (clip : AnimationClip, optionalRoot : Object3D) ：释放动作的所有内存资源

源码体验地址

github：动画兔子岛
在线体验：https://threejs-rabbit-island.vercel.app/

Threejs 导入动态模型 - 兔子岛相关推荐

threeJS导入FBX模型
初认threeJS Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.官方地址:http:// ...
threejs 导入gltf模型并添加Sprite标注，在vue结合websocket实时更新贴图的信息
效果展示: 1. 导入依赖 import * as THREE from 'three'import {GLTFLoader} from 'three/examples/jsm/loaders/GLT ...
使用threejs导入外部模型与滑动查看【微信小程序】-裁-
目录可行方法 1.下载示例项目: 2.CV 改代码弃稿[不要用] 可行方法好不容易找到的参考文章: https://segmentfault.com/a/1190000041147784 1.下 ...
threejs+vue房子模型，实现BSP模型剪切，导入obj+mtl文件
threejs版本选择 "dependencies": {"@types/three": "^0.126.1", "three&q ...
threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能
先来看下最终的效果. 导入obj模型如果仅使用Mesh几何而不加载任何外部资源,则网页应直接在文件系统中运行,只需双击HTML文件打开即可以预览.而由于3D模型是从外部加载进来的,由于浏览器的原始策 ...
threejs导入模型为黑色原因
本文主要说明在使用threejs导入模型为黑色问题的原因第一个原因,加载模型时,需要设置两个属性 loader.load( xxx.3mf', function ( object ) {object ...
bullet物理引擎与OpenGL结合导入3D模型进行碰撞检测以及画三角网格的坑
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11681069.html 一.初始化世界以及模型 /// 冲突配置包含内存的默认设置,冲突设置. ...
Opencv获取导入DNN模型的各层信息
1_Opencv获取导入DNN模型的各层信息一.代码 1.C++代码 2.Python代码二.相关说明 1.支持深度学习框架 2.导入模型的有三个参数一.代码 1.C++代码 #include ...
ThreeJS导入外部obj和mtl
本文将介绍如何使用ThreeJS导入obj和带贴图mtl的外部obj模型: 使用AmbientLight为场景所有物体添加基础光源: 使用SpotLight为场景添加聚光灯效果,并为obj添加阴影效 ...

Threejs 导入动态模型 - 兔子岛

GLTF加载器（GLTFLoader）

导入兔子模型

源码体验地址

Threejs 导入动态模型 - 兔子岛相关推荐

最新文章

热门文章