返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/202779.html(转载时请注明来源链接)

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

猜你喜欢
  • 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+
    2024-04-02
  • Vue Three.js 的材質系統:讓你的 3D 模型更逼真
    紋理貼圖 紋理貼圖用於為模型添加顏色和細節。它們通常是 2D 影像,被投影到模型的表面上。Vue Three.js 支持多種紋理格式,包括 PNG、JPEG 和 TIFF。 // 使用紋理加載器加載紋理 const textureLoa...
    99+
    2024-03-09
    關鍵字:Vue Three.js、材質系統、3D 建模、紋理貼圖、法線貼圖、鏡面反射
  • 如何在Keras中使用模型的子类化
    在Keras中使用模型的子类化可以通过创建一个继承自tf.keras.Model的子类来实现。以下是一个简单的示例: import ...
    99+
    2024-03-14
    Keras
  • thinkphp5 使用模型查询对象类型转数组
    在ThinkPHP5中,可以使用模型的toArray方法将查询结果对象类型转换为数组类型。以下是一个例子:1. 假设有一个User模...
    99+
    2023-10-11
    php
  • C++ 函数模板中类型参数的使用技巧?
    使用类型参数技巧可以创建针对任何类型工作的通用 c++++ 函数模板,包括:声明类型参数:使用尖括号 和 typename 声明类型参数。使用类型参数:在函数体内使用类型参数作为类型声...
    99+
    2024-04-15
    c++ 函数模板
  • Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析
    目录先上几个网址安装组件中引入 基本使用 补充 最近刚开始做的一个项目,后面有个模块要通过three.js实现3D的场景,因为之前也没接触过3D这块,就...
    99+
    2024-04-02
  • 探讨使用Go实现类似于Erlang的并发模型
    Erlang 是一种功能强大的编程语言。它非常适合用于并发编程和分布式系统。Erlang 的设计目的是为了构建可靠的、容错的系统。而 Go 语言是一种简单高效的语言,它在开发网络应用程序时非常方便。本文我们将探讨使用 Go 语言实现 Erl...
    99+
    2023-05-14
  • 使用three.js怎么模拟一个太阳系行星体系
    使用three.js怎么模拟一个太阳系行星体系?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。概况如下: SphereGeometry 实现自转的太阳; RingGeometry...
    99+
    2023-06-09
  • Redis中Hash类型的使用
    目录Hash与String比较Hash类型的常见命令(显而易见,在String命令前加入H就是Hash的命令) 1.HSET key field  value:添加或修改hash类型key的field...
    99+
    2023-06-09
    Redis Hash类型 Redis Hash
  • yolov3模型训练——使用yolov3训练自己的模型
    本文主要讲述了在Windows10环境下使用yolov3训练模型的具体步骤 本文主要包括以下内容: 一、程序下载与准备(1)yolov3下载(2)训练集文件夹创建(3)预训练权重下载 二、...
    99+
    2023-09-02
    pytorch
  • Hybris DDIC类型及其对应的模型类是什么
    这篇文章主要讲解了“Hybris DDIC类型及其对应的模型类是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Hybris DDIC类型及其对应的模型类是什么”吧!在ABAP里,我们在S...
    99+
    2023-06-04
  • C#中如何使用值类型和引用类型
    C#中如何使用值类型和引用类型,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1。变量:变量是指在程序的运行过程中随时可以发生变化的量。语法:数据类型 变量名2。常量:也称常数,...
    99+
    2023-06-17
  • Kylin支持哪种类型的数据模型
    Kylin支持多维数据模型,包括星型模型和雪花模型。它可以处理具有事实表和多个维度表的复杂数据模型。Kylin还支持维度表之间的多对...
    99+
    2024-03-06
    Kylin
  • 使用指向类型参数的指针创建泛型类型的实例
    php小编鱼仔在这篇文章中将介绍如何使用指向类型参数的指针来创建泛型类型的实例。泛型是一种在编程中广泛应用的概念,它允许我们在不指定具体类型的情况下编写通用的代码。在php中,虽然没有...
    99+
    2024-02-09
  • 云服务器的模式类型
    1. 公有云服务器 公有云服务器是由云服务提供商(如阿里云、腾讯云、亚马逊AWS等)提供的一种基础设施即服务(IaaS)模式。在公有云服务器中,多个用户共享同一物理服务器的资源,但每个用户的数据是相互隔离的。公有云服务器通常具有高可用性、...
    99+
    2023-10-27
    类型 模式 服务器
  • typescript返回值类型和参数类型的具体使用
    目录返回值类型可缺省和可推断的返回值类型Generator 函数的返回值参数类型可选参数和默认参数剩余参数返回值类型 在 JavaScript 中,我们知道一个函数可以没有显式 re...
    99+
    2024-04-02
  • javascript的Symbol类型怎么使用
    这篇“javascript的Symbol类型怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看...
    99+
    2024-04-02
  • PHP中数据类型的使用
    PHP 中的数据类型是编程中非常重要的一部分。在 PHP 编程中,有多种数据类型可用于存储不同类型的值,包括数字、字符串、布尔值、数组、对象和空值。了解和正确使用这些数据类型对于开发高效、可靠的 PHP 应用程序至关重要。下面是一些常见的 ...
    99+
    2023-05-25
    PHP数据类型 数据类型转换 变量类型
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作