three.js?Mool3D模型类如何使用
这篇文章主要介绍“three.jsMool3D模型类如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“three.jsMool3D模型类如何使用”文章能帮助大家解决问题。
Model类
场景加载
加载场景主要使用引擎中的model类来实现，引擎中model类主要功能有配置文件模型加载、场景切换、单一自定义模型加载、场景下动画的控制等～
//下方为简单场景的加载import{Viewer}from"../Threejs/index";exportclassIndexextendsViewer{constructor(options){super(options);this.initModel();}}推荐通过继承主类的方式扩展业务代码，上方是一个最简单的场景加载示例。细心的同学可以发现上方只是初始化了一个model类而已如何完成场景的加载的，当然完成场景加载还需要一个触发场景的条件，这我们通常可以在容器文件中实现。下方就是最简单的场景加载容器～
//vue文件//初始化constinit=()=>{constel=refmap.value;sceneA=newIndex({el:elasHTMLElement,tween:TWEEN,path:"../public/scene/",//基础路径});setScene(1);};//切换场景constsetScene=(id)=>{switch(id){case1:sceneA.setScene(1,()=>{//场景加载成功回调});sceneA.flyTo({//相机位置position:[0,5,6],controls:[0,0,0],duration:2000,});break;default:break;}};场景配置文件
上方代码通过场景id加载场景，那是如何知道需要加载哪些模型呢？引擎通过config.json文件约束不同场景下所依赖的模型文件，配置文件存放路径为基础路径下（../public/scene/） 下方详细介绍配置文件～
[{"name":"mool",//名称"target":false,//是否被鼠标拾取"layeridx":1,//场景id"scale":1,//场景缩放"positionX":50,//场景初始位置"positionY":120,"positionZ":170,"layers":[//场景模型配置对象{"name":"./glb/building1.glb"},{"name":"./glb/building2.glb"}]}......]递归处理场景模型
照着上方的操作，我们完成了场景的加载。这时场景已经呈现在画面上，如果我们需要修改场景模型的材质等操作怎么做呢？ 当然模型类中也考虑到这一点，提供了一个回调处理解码的模型，具体怎么操作见下方～
constructor(options){super(options);this.initModel();//这是在加载场景模型之前执行的回调，所以建议放在初始化类时完成回调的注册，这样会在模型加载过程中递归去修改模型this.model.deepFunction.push(({e,item})=>{//e:模型碎片Mesh/item:场景配置文件e.scale.set(300,300,300);});}不推荐什么方法都放在constructor中去调用，由于模型加载时才会去设置当前场景的id，如在constructor中初始化天空和灯光等，会出现无效的情况，出现这种情况是因为场景id默认值为1，都加载到场景1中去了。所以模型类提供一个场景加载成功的回调，在里面初始化场景需要的一些修饰类如灯光、天空、环境贴图等～
sceneA.setScene(1,()=>{//场景加载成功回调sceneA.initEnvironment({path:"exr.exr",type:"exr",});});加载独立模型
如何加载独立于场景配置文件之外的模型呢？模型类提供GLB和FBX两种类型模型加载方法，具体见下方说明～
//加载glb/gltf模型this.model.loadModel("../public/scene/glb/walk.glb",this.sceneidx,(glb,animations)=>{glb:为模型对象animations:模型动画...模型自定义修改});//加载fbx模型this.model.loadFbxModel("../public/scene/glb/walk.fbx",this.sceneidx,(fbx,animations)=>{fbx:为模型对象animations:模型动画...模型自定义修改});注意上方只提供加载模型，不会主动添加到场景中，需修改定制化模型参数之后手动将其add到场景中～
动画
模型类中提供两种执行动画的方法，一种是执行场景下的所有动画，一种是执行某个名称的动画。具体使用见下方说明～
//执行场景下的所有动画this.model.playAllClipes(this.sceneidx);//传入场景的id//执行某名称的动画this.model.playNameClipes(this.sceneidx,'mool');//传入场景的id和动画名称
关于“three.jsMool3D模型类如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注主机评测网行业资讯频道，小编每天都会为大家更新不同的知识点。
上一篇：jsoup框架如何使用