three.js Mool3D模型类的使用

 更新时间:2023年03月31日 16:33:09   作者:Mool  
这篇文章主要为大家介绍了three.js Mool3D模型类的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Model类

之前的引擎介绍文章中有人留言想了解如何通过引擎加载自定义的模型场景,这篇文章将详细介绍如何加载场景及场景配置文件的说明~

场景加载

加载场景主要使用引擎中的model类来实现,引擎中model类主要功能有配置文件模型加载、场景切换、单一自定义模型加载、场景下动画的控制等~

//下方为简单场景的加载
import { Viewer } from "../Threejs/index";
export class Index extends Viewer {
  constructor(options) {
    super(options);
    this.initModel();
  }
}

推荐通过继承主类的方式扩展业务代码,上方是一个最简单的场景加载示例。细心的同学可以发现上方只是初始化了一个model类而已如何完成场景的加载的,当然完成场景加载还需要一个触发场景的条件,这我们通常可以在容器文件中实现。下方就是最简单的场景加载容器

//vue文件
//初始化
const init = () => {
  const el = refmap.value;
  sceneA = new Index({
    el: el as HTMLElement,
    tween: TWEEN,
    path: "../public/scene/", //基础路径
  });
  setScene(1);
};
//切换场景
const setScene = (id) => {
  switch (id) {
    case 1:
      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",
    });
});

加载独立模型

如何加载独立于场景配置文件之外的模型呢?模型类提供GLBFBX两种类型模型加载方法,具体见下方说明~

//加载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和动画名称

结语

本文为Mool3D引擎下的模型类的介绍和使用,主要设计思想是通过配置文件完成场景加载,提供自定义模型的加载和场景动画的控制。

更多关于three.js Mool3D模型类的资料请关注脚本之家其它相关文章!

相关文章

  • JS修改iframe页面背景颜色的方法

    JS修改iframe页面背景颜色的方法

    这篇文章主要介绍了JS修改iframe页面背景颜色的方法,涉及javascript操作iframe页面样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript 参数中的数组展开 [译]

    JavaScript 参数中的数组展开 [译]

    有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作
    2012-09-09
  • JavaScript中合并数组的N种方法

    JavaScript中合并数组的N种方法

    这篇文章主要介绍了JavaScript中合并数组的N种方法,本文使用concat、循环插入、reduce等方法合并JavaScript数组,需要的朋友可以参考下
    2014-09-09
  • 详解如何利用chatgpt保护您的js代码

    详解如何利用chatgpt保护您的js代码

    这篇文章主要为大家介绍了如何利用chatgpt保护您的js代码详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JavaScript利用Immerjs实现不可变数据

    JavaScript利用Immerjs实现不可变数据

    Immerjs 是一个用于管理 JavaScript 不可变数据结构的库,它可以帮助我们更轻松地处理状态的变化,并减少冗余代码。本文就来带大家揭秘如何利用Immerjs实现不可变数据,感兴趣的可以了解一下
    2023-04-04
  • JS实现无缝循环marquee滚动效果

    JS实现无缝循环marquee滚动效果

    这篇文章主要为大家详细介绍了JS实现无缝循环marquee滚动效果,兼容IE, FireFox, Chrome,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 用JavaScript动态建立或增加CSS样式表的实现方法

    用JavaScript动态建立或增加CSS样式表的实现方法

    下面小编就为大家带来一篇用JavaScript动态建立或增加CSS样式表的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js中getBoundingClientRect的作用及兼容方案详解

    js中getBoundingClientRect的作用及兼容方案详解

    这篇文章主要介绍了js中getBoundingClientRect的作用及兼容方案详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 小程序简单两栏瀑布流效果的实现

    小程序简单两栏瀑布流效果的实现

    这篇文章主要介绍了小程序简单两栏瀑布流效果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 小程序实现人脸识别的项目实践

    小程序实现人脸识别的项目实践

    人脸识别在现在很多地方都可以用的到,例如支付,解锁等,本文就来介绍一下小程序实现人脸识别,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10

最新评论