pmd格式模型 html加载,Three.js 模型载入
8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?
obj格式
THREE.OBJLoader(manager)manager 加载器使用的loadingManager,默认为THREE.DefaultLoadingManager
方法
load 加载文件
.load( url, onLoad, onProgress, onError)url 路径
onLoad (可选)加载完成后调用的函数,接收Object3D作为参数
onProgress (可选)加载过程中调用的函数,接收XMLHttpRequest实例作为参数,其中包含加载内容的总大小和已加载大小
onError (可选)出错时调用的函数,接收错误信息作为参数
示例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21var model;
var loader = new THREE.OBJLoader();
loader.load('model/tree/model.obj', function(obj){
model = obj;
// obj是一个THREE.Group实例,
// 要用.children获取其包含的所有THREE.Mesh实例
var children = obj.children;
for (var i = 0; i < children.length; i++) {
//添加阴影
children[i].castShadow= true;
}
// 添加模型到scene
scene.add(obj);
},function(xhr){
// 显示加载进度
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},function(error){
// 显示错误信息
console.log(error);
});
parse 解析obj文本
直接加载obj文件文本内容
.parse ( text )test obj文件文本
mlt格式
mlt是obj模型的材质文件
MTLLoader 官方文档
MTLLoader(loadingManager)loadingManager 默认值为DefaultLoadingManager
方法
load 加载mtl文件
从url加载mlt文件并返回加载的材质
.load ( url, onLoad, onProgress, onError )onLoad (可选)加载完成后调用的函数,接收MTLLoader.MaterialCreator实例作为参数1
2
3
4
5
6
7
8
9
10
11var model;
var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
mtlLoader.load('model/tree/materials.mtl', function(materials){
// 设置材质
objLoader.setMaterials(materials);
objLoader.load('model/tree/model.obj', function(obj){
model = obj;
scene.add(obj);
});
});
setPath 设置基本路径
.setPath ( path )1
2
3
4
5
6
7var mtlLoader = new THREE.MTLLoader();
// 记得用"/"作为路径结尾,例如 'model/tree'中的tree会被忽略
mtlLoader.setPath('model/tree/');
mtlLoader.load('materials.mtl',function(){});
// 相当于
new THREE.MTLLoader().load('model/tree/model.obj',function(){});
setCrossOrigin 允许跨域
.setCrossOrigin ( useCrossOrigin )
如果需要从其他源加载纹理文件,设置为true1
2var mtl = new THREE.MTLLoader();
mtl.setCrossOrigin(true);
setMaterialOptions ?
.setMaterialOptions ( options )side THREE.FrontSide (default), THREE.BackSide, THREE.DoubleSide
wrap
normalizeRGB
ignoreZeroRGBs
MMDLoader.js
MMDLoader.js插件包含两个构造函数
THREE.MMDLoader() 用于加载模型/骨骼等文件
THREE.MMDHelper() 用于设置物理/骨骼/声音选项
更多方法请参考MMDLoader 源代码
载入MMDLoader插件挺麻烦的,需要的依赖太多,可以在example目录下找到这些文件1
2
3
4
5
6
7
8
9
10
11
12
MMDLoader
THREE.MMDLoader()
方法
load 加载模型和动作文件
load = function ( modelUrl, vmdUrls, callback, onProgress, onError )modelUrl pmd|pmx模型文件路径
vmdUrls 一个数组,内含一组vmd动作文件路径
callback 回调函数,模型加载完毕后调用
onProgress (可选)加载过程中调用
onError (可选)出错时调用1
2
3
4
5
6
7
8
9var model;
var mmdLoader = new THREE.MMDLoader;
var mmdPath = 'model/kizunaai/kizunaai.pmx';
var vmdPath = ['model/vmd/Ririri.vmd',];
mmdLoader.load(mmdPath, vmdPath,function(object){
model = object;
scene.add(object);
});
loadModel 加载pmd|pmx
loadModel( url, callback, onProgress, onError )
loadModel在内部使用this.createModel()创建模型1
2
3
4
5
6
7
8
9
10
11
12
13var model;
var mmdFile = 'model/ia/IA.pmx';
var mmdLoader = new THREE.MMDLoader();
//加载模型
mmdLoader.loadModel(mmdFile, function(object){
model = object;
object.scale.set(40, 40, 40);
// 更改坐标位置
object.position.x = 500;
// 添加阴影
object.castShadow = true;
scene.add(object);
});
loadVmd 加载vmd文件
.loadVmd( url, callback, onProgress, onError )1
2
3
4
5var vmd;
var mmdLoader = new THREE.MMDLoader();
mmdLoader.loadVmd('model/vmd/Ririri.vmd',function(obj){
vmd = obj;
})
loadVmds 加载多个vmd文件
.loadVmds( url, callback, onProgress, onError )url 一个队列,内含一组vmds文件的url1
2
3
4
5
6var vmd;
var mmdLoader = new THREE.MMDLoader();
var vmdPath = ['model/vmd/Ririri.vmd','model/vmd/Ririri1.vmd']
mmdLoader.loadVmds(vmdPath ,function(obj){
vmd = obj;
})
loadAudio 加载音频文件
.loadAudio( url, callback, onProgress, onError )1
2
3
4
5
6
7
8var mp3;
var lter;
var mmdLoader = new THREE.MMDLoader();
mmdLoader.loadVmds(vmdPath ,function(audio, listener){
mp3 = obj;
// listener 是一个THREE.AudioListener实例
lter = listener;
})
loadVpd 加载姿势文件
.loadVpd( url, callback, onProgress, onError, params )
MMDHelper
add
.add(mesh)mesh 用MMDLoader().load()获取到的模型1
2
3
4
5
6
7var mmdHelper = new THREE.MMDHelper();
var mmdLoader = new THREE.MMDLoader();
var mmdPath = 'model/kizunaai/kizunaai.pmx';
var vmdPath = ['model/vmd/Ririri.vmd',];
mmdLoader.load(mmdPath, vmdPath,function(object){
mmdHelper.add(object);
});
setAudio 设置音频文件
.setAudio( audio, listener, params );params 对象,内含一组音频参数delayTime 声音播放延迟,单位为秒
setCamera 加载相机
.setCamera( camera )
setPhysics 设置物理效果(重力,碰撞之类的)
.setPhysics( mesh, params )params (可选)物理参数
setAnimation 设置动画
.setAnimation( mesh )
setCameraAnimation 设置相机动画
.setCameraAnimation( camera )
unifyAnimationDuration
检测动作/音频/相机的时间长度,使其自动同步
.unifyAnimationDuration( params )1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53var mmdModel,mmdCamera,mmdAudio,mmdListener,ready;
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
var mmdHelper = new THREE.MMDHelper();
var mmdLoader = new THREE.MMDLoader();
var mmdPath = 'model/kizunaai/kizunaai.pmx';
var vmdPath = ['model/vmd/Ririri.vmd'];
var mmdCameraPath = ['model/vmd/wavefile_camera.vmd'];
var AudioPath = 'mp3/Ririri.mp3';
mmdLoader.load(mmdPath, vmdPath,function(object){
mmdModel = object;
callback();
});
mmdLoader.loadVmds(mmdCameraPath, function (vmd){
mmdCamera = vmd;
callback();
});
mmdLoader.loadAudio( AudioPath, function (audio, listener){
mmdAudio = audio;
mmdListener = listener;
callback();
});
function (){
if(!mmdModel || !mmdCamera || !mmdAudio || !mmdListener) {
return;
}
mmdHelper.add(mmdModel);
// 加载摄像机运动轨迹
mmdHelper.setCamera(camera);
// 绑定vmd轨迹到相机对象
mmdLoader.pourVmdIntoCamera(camera, mmdCamera);
// 开启相机动画,在pourVmdIntoCamera后调用
mmdHelper.setCameraAnimation(camera);
// 加载物理效果
mmdHelper.setPhysics(mmdModel);
// 开启动作
mmdHelper.setAnimation(mmdModel);
mmdListener.position.z = 1;
// 加载声音,延迟1s播放
mmdHelper.setAudio(mmdAudio,mmdListener, { delayTime: 1});
// 同步声音和动作
mmdHelper.unifyAnimationDuration();
scene.add(mmdModel,mmdAudio,mmdListener);
ready = true;
}
var clock = new THREE.Clock();
function animation(){
if (ready) {
mmdHelper.animate(clock.getDelta());
}
requestAnimationFrame(animation);
}
注 给mmd模型设置Physics后,不要再用scale修改模型大小(会导致模型变成一坨不明物体)
pmd格式模型 html加载,Three.js 模型载入相关推荐
- 6.2 模型保存 --- 加载和保存模型结构权重
一.只保存/加载模型的结构 保存模型的结构,而非其权重或训练配置项: json_string = model.to_json() model.save('my_model.h5') my_model_ ...
- 从3dMax导出供threeJS使用的带动作模型与加载(认真修改详尽版)
评论区发现的建议,最近没空测试,先贴这 还有好多人说找不到插件的 https://pan.baidu.com/s/1Q5g0... 密码:b43e . 应该是他们现在只是维护blender,只有这个的 ...
- Three.js(十四)—— 模型文件加载
文章目录 14.Three.js 加载外部模型文件 14.1 Three.js 数据结构.导入导出 Threejs导出模型信息 自定义模型加载器文件 加载Three.js导出的模型数据 14.2 加载 ...
- Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示
Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示 目录 Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展 ...
- three.js 加载obj+mtl模型
本文提供了three.js中 实现将obj+mtl模型加载到场景中 的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
- vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...
- threejs中FBX格式模型的加载与克隆
最近根据项目需求需要加载和克隆带动画的FBX模型,但是发现直接用Object.clone方法无法对fbx模型进行克隆,于是查资料解决克隆问题. 废话不多说,直接正题: 所需脚本: threer97表示 ...
- 3D模型的加载与使用
http://www.hewebgl.com/article/getarticle/126 1.感谢词 亲爱的朋友: 您们好.感谢您阅读WebGL中文网的初级课程,学习到本课,我们假设您已经学习 ...
- 超图桌面版加载obj 3D模型 - 2
在 https://blog.csdn.net/bcbobo21cn/article/details/109041525 里,加载obj格式模型没有出来效果: 下面来看一下其他方法:当前用的版本是10 ...
最新文章
- Python数据挖掘2:pandas使用:Series一串数字和DataFrame数据框
- C语言单向链表的实现
- 简要叙述matlab的含义,1,简述MATLAB组成部分? 2,说明使用M文件编辑/调试器的方法和优点? 3,存储在工作空间中的数组能编辑吗...
- 哈工大操作系统环境配置
- linux生成驱动编译的头文件,嵌入式Linux字符设备驱动——5生成字符设备节点
- Eclipse使用Team explorer everywhere进行代码管理
- 设计模式 之 建造者
- Spring操作Redis
- JAVA GC(Garbage Collection)及OOM那些事
- Java 面试高频提问知识点一
- MySQL Group Replication数据安全性保障
- idea debug异常关闭 Error running 'Tomcat8': Unable to open debugger port (127.0.0.1:50168): java.net.Soc
- 第一章:开始启程-你的第一行Android代码
- Java设计模式—观察者模式
- linux使用入门debian,Debian 7.7入门安装与配置
- Linux 学习路线图
- HTML使用样式格式化文档
- 论文阅读《Contextual-based Image Inpainting: Infer, Match, and Translate》
- 2017全球智慧城市战略指数分析
- WPF 自定义ToggleButton样式