iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >three.js Mool3D模型类的使用
  • 716
分享到

three.js Mool3D模型类的使用

three.js Mool3D模型类three.js Mool 2023-05-14 05:05:39 716人浏览 独家记忆
摘要

目录Model类场景加载场景配置文件递归处理场景模型加载独立模型动画结语Model类 之前的引擎介绍文章中有人留言想了解如何通过引擎加载自定义的模型场景,这篇文章将详细介绍如何加载

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模型类的资料请关注编程网其它相关文章!

--结束END--

本文标题: three.js Mool3D模型类的使用

本文链接: https://www.lsjlt.com/news/202779.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • three.js Mool3D模型类的使用
    目录Model类场景加载场景配置文件递归处理场景模型加载独立模型动画结语Model类 之前的引擎介绍文章中有人留言想了解如何通过引擎加载自定义的模型场景,这篇文章将详细介绍如何加载...
    99+
    2023-05-14
    three.js Mool3D模型类 three.js Mool
  • three.js Mool3D模型类如何使用
    这篇文章主要介绍“three.js Mool3D模型类如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“three.js Mool3D模型类如何使用”文章能帮助大家解决问题。...
    99+
    2023-07-05
  • Three.js加载外部模型的示例分析
    这篇文章主要介绍了Three.js加载外部模型的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.  首先我们要在官网: ...
    99+
    2022-10-19
  • Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析
    目录先上几个网址安装组件中引入 基本使用 补充 最近刚开始做的一个项目,后面有个模块要通过three.js实现3D的场景,因为之前也没接触过3D这块,就...
    99+
    2022-11-13
  • thinkphp5 使用模型查询对象类型转数组
    在ThinkPHP5中,可以使用模型的toArray方法将查询结果对象类型转换为数组类型。以下是一个例子:1. 假设有一个User模...
    99+
    2023-10-11
    php
  • 使用three.js怎么模拟一个太阳系行星体系
    使用three.js怎么模拟一个太阳系行星体系?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。概况如下: SphereGeometry 实现自转的太阳; RingGeometry...
    99+
    2023-06-09
  • Hybris DDIC类型及其对应的模型类是什么
    这篇文章主要讲解了“Hybris DDIC类型及其对应的模型类是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Hybris DDIC类型及其对应的模型类是什么”吧!在ABAP里,我们在S...
    99+
    2023-06-04
  • 云服务器的模式类型
    1. 公有云服务器 公有云服务器是由云服务提供商(如阿里云、腾讯云、亚马逊AWS等)提供的一种基础设施即服务(IaaS)模式。在公有云服务器中,多个用户共享同一物理服务器的资源,但每个用户的数据是相互隔离的。公有云服务器通常具有高可用性、...
    99+
    2023-10-27
    类型 模式 服务器
  • 探讨使用Go实现类似于Erlang的并发模型
    Erlang 是一种功能强大的编程语言。它非常适合用于并发编程和分布式系统。Erlang 的设计目的是为了构建可靠的、容错的系统。而 Go 语言是一种简单高效的语言,它在开发网络应用程序时非常方便。本文我们将探讨使用 Go 语言实现 Erl...
    99+
    2023-05-14
  • sql server属于哪个类型的数据模型
    这篇文章给大家分享的是有关sql server属于哪个类型的数据模型的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。sql server属于什么类型的数据模型?SQL Server...
    99+
    2022-10-18
  • Django3.x框架模型字段类型怎么应用
    在Django 3.x框架中,模型字段用于定义数据库表中的列。以下是一些常见的模型字段类型及其用法: 字符型字段(CharFiel...
    99+
    2023-10-23
    Django
  • Python的datetime模块有哪些类型
    本篇内容介绍了“Python的datetime模块有哪些类型”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  datetime 模块提供了可...
    99+
    2023-06-02
  • Python模块的几种类型介绍
    这篇文章主要介绍“Python模块的几种类型介绍”,在日常操作中,相信很多人在Python模块的几种类型介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python模块的几种类型介绍”的疑惑有所帮助!接下来...
    99+
    2023-06-17
  • Redis中Hash类型的使用
    目录Hash与String比较Hash类型的常见命令(显而易见,在String命令前加入H就是Hash的命令) 1.HSET key field  value:添加或修改hash类型key的field...
    99+
    2023-06-09
    Redis Hash类型 Redis Hash
  • C#中如何使用值类型和引用类型
    C#中如何使用值类型和引用类型,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1。变量:变量是指在程序的运行过程中随时可以发生变化的量。语法:数据类型 变量名2。常量:也称常数,...
    99+
    2023-06-17
  • yolov3模型训练——使用yolov3训练自己的模型
    本文主要讲述了在Windows10环境下使用yolov3训练模型的具体步骤 本文主要包括以下内容: 一、程序下载与准备(1)yolov3下载(2)训练集文件夹创建(3)预训练权重下载 二、...
    99+
    2023-09-02
    pytorch
  • 简介Python的collections模块中defaultdict类型的用法
    defaultdict 主要用来需要对 value 做初始化的情形。对于字典来说,key 必须是 hashable,immutable,unique 的数据,而 value 可以是任意的数据类型。如果 va...
    99+
    2022-06-04
    模块 类型 简介
  • vue3项目中使用three.js的操作步骤
    目录前言一、three.js是什么?二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五...
    99+
    2023-01-15
    vue3 three.js vue使用three.js
  • typescript返回值类型和参数类型的具体使用
    目录返回值类型可缺省和可推断的返回值类型Generator 函数的返回值参数类型可选参数和默认参数剩余参数返回值类型 在 JavaScript 中,我们知道一个函数可以没有显式 re...
    99+
    2022-11-13
  • C++非模板类型参数怎么用
    本篇内容介绍了“C++非模板类型参数怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、非模板类型参数分类:模板参数分类类型形参与非类型...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作