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修改模型大小(会导致模型变成一坨不明物体)