- 综合排序
- 最热优先
- 最新优先
- 来自专栏LET
glTF简介
概述 glTF简介，Web端三维模型及其特点 Cesium如何加载，渲染glTF，逻辑结构和关键技术 个人总结，从glTF学习如何设计一个二进制格式，个人想法分享 关键字：Cesium glTF WebGL 也就是今天要讲的glTF模型渲染。 glTF的全称是GL传输格式，是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行时资产(asset)。 充分体现了glTF规范设计的强大，让我想到了一句话：“解决问题固然重要，但通过设计避免问题则更胜一筹”。 因此glTF还包含整个场景的关系，包括节点，变换矩阵，变换的层级关系，网格，材质，相机和动画，试图保存所有信息。这是一个场景树的逻辑，算是glTF的一个优化。 ▽Accessor&Json表述 这是glTF数据读取的机制，设计的很优雅，很值得我们学习。
4K100发布于 2018-06-20 - 来自专栏acoolgiser_zhuanlan
bat 批处理 脚本 for循环 批量压缩gltf模型 gltf批量压缩 gltf压缩转成glb
bat 批处理 脚本 for循环 批量压缩gltf模型 gltf批量压缩 gltf压缩转成glb 这里参考两篇文章： 1. 关于gltf压缩转成glb的工具（gltf-pipeline） https://blog.csdn.net/niujing1987/article/details/100639864 2. ，就可以直接通过下面一句命令安装gltf-pipeline这个库： npm install -g gltf-pipeline 安装完成后，按照官方地址的使用说明，直接对模型进行压缩即可，比如： gltf-pipeline -i model.gltf -o modelDraco.gltf -d 就可以把model.gltf模型压缩。 三、批量处理 gltf-pipeline官方并没有介绍批量处理的方法，下面我们通过批处理来实现： 打开cmd，进入gltf模型存放的路径，如下图，输入命令，回车，就会自动循环执行，批量压缩。
2.4K10发布于 2020-12-16 - 来自专栏LET
glTF（二）：PBR
glTF glTF是一个优秀的三维数据规范，其中有很多细节都值得我们学习，按照我的理解，可以分为三大块： Accessor数据访问机制 一套访问二进制数据的规范，将逻辑层和数据层隔离 同传输和读取以及存储灵活性上都有上佳表现 相比1.0，glTF2.0的改变可以用“一增一删修修补补”来概括，主要有： 新增PBR(Physically-Based Rendering )材质 本文重点，稍后继续 删除Technique和Shader 个人理解：剥离渲染部分，glTF规范更专注数据层面 更好的融入Web体系 其他 明确两个非重点：不支持流媒体，结构以JSON格式呈现，原始数据在可读性上并不友好 兼容性：2. 这里，glTF的采用的是Disney给出的BRDF公式： ? ，diffuse采用的是Lambert模型： ? (G)eometric term 表示从L光源能够到达V视角的概率，这里glTF采用的是GGX，而Cesium则是Schlick模型： ?
3.5K60发布于 2018-06-20 - 来自专栏3Dconvert
Revit导出为GLTF
Revit与GLTF格式简介Revit是Autodesk公司一套系列软件的名称。Revit系列软件是为建筑信息模型构建的，可帮助建筑设计师设计、建造和维护质量更好、能效更高的建筑。 GLTF是由OpenGL和Vulkan背后的3D图形标准组织Khronos所定义，成为Web上的3D对象标准。GLTF文件格式包括场景、摄像机、动画、网格、材质、纹理、渲染技术、着色器等元素。 Revit文件导出为GLTF格式Revit文件和GLTF格式都有广泛的用途，在模型应用工作中，经常需要将Revit文件导出为GLTF格式，怎么将Revit文件导出为GLTF格式呢？ 3Dconvert for Revit插件支持将.rvt，.rfa，.adsk，.rte等Revit格式文件，转换为8种目标格式：GLTF、OBJ、GLB、DAE、STL、OFF、XYZ和PLY。 在插件页面选择需要转换的目标格式，目前插件支持8种目标格式：GLTF、OBJ、GLB、DAE、STL、OFF、XYZ和PLY。选择需要导出的目标格式：GLTF。
1.7K10编辑于 2023-12-01 - 来自专栏LET
glTF(2.1): PBR
去年针对glTF的PBR材质，写过一篇文章。但重读这篇文章，觉得自己没讲到点子上。今天终于有时间，想着重新梳，重写一下。 Rasterization的不足 ? BRDF 上面的光学公式就剩下f这个函数的定义了，glTF里采用的是Disney提供的Microfacet（显微镜） model，简单说，就是这个材质可以模拟各种光学现象，fragment的朝向差别较大 但glTF基于《Unreal Engine's course notes on real-time PBR》进行了预处理，优化性能。 ? 这个预处理的依据就是如上的公式。
2.3K20发布于 2019-03-18 - 来自专栏计算机图形学 前端可视化 WebGL
UE导入FBX、GLTF模型
导入GLTF 由于webgl用gltf比较多，所以手上模型多是gltf格式。 UE有插件可以导入gltf 。比如gltf for UE4， 另外一个出名的就是Datasmith，是一个官方的插件。
4.1K10编辑于 2022-09-26 - 来自专栏代码编写世界
DEM转换为gltf
概述 DEM（地形文件）天然自带三维信息，可以将其转换成gltf模型文件。DEM是栅格数据，可以通过GDAL进行读取；gltf是一种JSON格式，可以采用nlohmann/json进行读写。 2. GDALAllRegister(); CPLSetConfigOption("GDAL_FILENAME_IS_UTF8", "NO"); //支持中文路径 my_json gltf ; gltf["asset"] = { {"generator", "CL"}, {"version", "2.0"} }; gltf["scene "] = 0; gltf["scenes"] = { {{"nodes", {0} }} }; gltf["nodes"] = { {{"mesh 参考 [1] github上的gltf教程 [2] gltf教程中文翻译 [3] nlohmann/json关于保留插入顺序的讨论
1.5K40发布于 2020-01-14 - 来自专栏代码编写世界
WebGL简易教程(十五)：加载gltf模型
从以上特性可以看出，glTF特别方便与互联网的使用场景，便于传输且预处理程度小。在这篇教程中，就通过一个带纹理的地形文件，具体解析以下glTF格式，顺便加深一下WebGL中初始化数据的理解。 2. 数据 使用的地形glTF文件已经处理好并上传到文章末尾的地址中（具体的转换过程可以参看《DEM转换为gltf》）。 将这个数据导入到glTF Viewer网站上查看，显示结果如下： ? flag) { alert("没有找到gltf"); } }); 这段代码看起来很繁复，其实原理很简单：遍历加载的文件，对于gltf文件采用FileReader.readAsText 《WebGL编程指南》 2.glTF格式详解(目录) 3.glTF Tutorial 4.前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输 5.gltf2.0规范
6K20发布于 2020-02-14 - 来自专栏前端漫步
Cesium入门之九：Cesium加载gltf文件
glTF文件介绍 glTF（Graphics Library Transmission Format）是一种用于存储3D模型和场景的格式。 glTF文件包含了设计场景或模型的几何形状、材质、纹理、动画等信息，同时有很好的兼容性和可扩展性。glTF文件基于JSON格式，具有易于阅读和修改的特点，同时也易于使用编程语言进行解析和使用。 glTF支持两种文件格式：*.glTF和 *.glb。 glTF文件易于阅读、修改和编辑，同时可以使用gzip进行压缩以减小文件大小。但是.glTF文件格式在处理复杂场景时，可能会变得比较冗长，处理速度较慢。 .glb是一种基于二进制的文件格式，它包含所有的glTF数据，包括所有的外部资源。由于.glb文件是二进制文件，大大减小了文件大小和加载时间，同时保持了.glTF文件的灵活性和可编辑性。.
5.8K31编辑于 2023-10-14 - 来自专栏前端漫步
Threejs入门之二十五：Threejs加载gltf文件
这一节我们来通过Threejs加载一个glft格式的三维模型文件，首先我们先简单了解下gltf文件gltf文件gltf文件全称Graphics Language Transmission Forma（图形语言传输格式 gltf文件核心是JSON文件，一个gltf文件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机等信息。 加载gltf文件下面通过代码实现加载一个gltf格式的文件到场景中，首先还是需要创建场景、相机、渲染器等初始化代码，具体步骤查看前面章节，代码如下页面初始化import * as THREE from 这里我们在加载gltf文件成功后，打印该gltf，看下里面的数据结构，并在加载成功后，将其加入到scene中loader.load('.. /models/motor03.gltf',function(gltf) { console.log(gltf); scene.add(gltf.scene) })刷新浏览器，查看效果
9.5K31编辑于 2023-05-19 - 来自专栏前端之攻略
gltf格式的压缩文件在threejs中展示
在H5中引入3D模型往往存在资源太大，可以通过模型网格压缩，通过glTF配合Draco压缩的方式，可以在视觉效果近乎一致的情况下，让3D模型文件成倍缩小 glTF在线查看器： https://gltf-viewer.donmccurdy.com 一、通过Draco进行压缩 Draco及gltf-pipeline的介绍 Draco是Google推出的一个用于3D模型压缩和解压缩的工具库，glTF资源可通过、Draco开发命令行工具gltf-pipeline 进行编码压缩，gltf-pipeline可通过npm的方式安装使用，使用方法如下： #全局安装 npm install -g gltf-pipeline #压缩glb文件 -b表示输出glb格式， -d 表示压缩 gltf-pipeline -i model.glb -b -d #压缩glb文件并将纹理图片分离出来 gltf-pipeline -i model.glb -b -d -t 更多参数查阅 => { console.log(gltf); gltf.scene.position.set(0, 0, 0); this.scene.add(gltf.scene
4K51发布于 2020-12-08 - 来自专栏javascript技术
Three.JS编程中如何切换gltf模型动画？
在Threejs编程中，处理GLTF模型动画的切换主要涉及对模型中的动画剪辑（AnimationClip）进行管理和播放控制。下面的代码，展示如何在Three.js中切换GLTF模型的动画。 步骤 1: 加载GLTF模型首先，你需要使用GLTFLoader来加载包含动画的GLTF模型。 ', function ( gltf ) { scene.add( gltf.scene ); // 假设gltf.animations是一个包含所有动画剪辑的数组 const mixer = new THREE.AnimationMixer( gltf.scene ); // 你可以存储这些剪辑以供后续使用 let clips 通过这些步骤，就能够在Three.js中实现加载、播放和切换GLTF模型的动画。
1.1K20编辑于 2024-09-04 - 来自专栏web三维
从2d户型图到gltf模型
必须要标注名称为【承重】在最红导出gltf模型时很重要 四、将GIS数据转换成gltf模型 选择一个名称为【户型底座】的轮廓。（右键编辑轮廓） 点击左侧【选择框】-3d户型 得到了三维模型。 绘制一个更大的轮廓，手动设置名称为【户型底座】 五、导出为gltf模型或stl模型 点击头部按钮【3d户型库】，打开户型库面板 已将户型模型上传到了网络地址。
86741编辑于 2025-07-29 - 来自专栏前端漫步
Threejs进阶之二：gltf模型场景优化--添加地面和灯光
上一节中我们将一辆摩托车的gltf模型加载到了三维场景中，这一节我们来对场景进行优化，使其更符合现实的情况，先看最终效果 添加地面首先我们给场景添加一个地面，这里用到了PlaneGeometry，创建一个 ,reject) => { const loader = new GLTFLoader().setPath('3dModels/') loader.load(modelName,(gltf ) =>{ // console.log(gltf); const motorModel = gltf.scene motorModel.traverse(
4.4K10编辑于 2023-05-19 - 来自专栏RESTART POiNTER
模型交换格式glTF概述
什么是glTF？ 在3D开发领域，存储模型是一个基本需求，对于前端也不例外。 为了解决这个痛点，glTF应运而生。 glTF的设计思想 glTF的核心设计思路是数据和结构的分离，通过json文件存储模型的层级和索引信息，通过二进制文件存储扁平的数据体。 下面来看glTF的文件结构。 glTF文件结构概览 一个典型的glTF格式的json文件，由以下结构组成 image.png 每个结构都是单元数组，结构之间通过数组下标互相索引。 //github.com/KhronosGroup/glTF
5.1K52发布于 2020-10-30 - 来自专栏前端漫步
Threejs进阶之三：通过GUI修改gltf模型(摩托车)颜色
motor3d.js中通过import引入GUI插件import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js' //引入GUImotor03.gltf 的组成在对gltf模型进行修改之前，我们需要先了解下这个模型的组成，我们可以通过在控制台打印该模型的方式查看其文件结构，也可以在threejs官网通过editor功能查看。 ,reject) => { const loader = new GLTFLoader().setPath('3dModels/') loader.load(modelName,(gltf ) =>{ const motorModel = gltf.scene motorModel.traverse(obj => { if(obj.name
5.7K30编辑于 2023-05-19 - 来自专栏Web行业观察
使用带实例的Gltf导入UE4的可行性
作者：Huang Jiahe 目录 使用带实例的Gltf导入UE4的可行性 1.金恒昱使用js生成了一个包含实例Gltf 2.将Gltf导入UE4 3.结论 1.使用js生成了一个包含实例Gltf 文件大小为：21K Gltf中包含一个立方体Mesh，Cube名为：Cube.009 1. 2.将Gltf导入UE4 使用Datasmith插件导入Gltf 参数选择：Gltf中坐标是以m为单位，UE4中坐标以cm为单位，所以要将所有坐标乘上100 image.png 导入结果： 只导入了一个 Gltf格式是开放的3D模型和场景格式，旨在有效地传输丰富的场景3D数据。 Gltf易于读写，可以使用多种开源库之一将glTF文件读取到自定义应用程序中，也可以自己编写导入程序。 glTF格式使用JSON描述符文件，该文件描述glTF的内容及其属性。
3.4K40发布于 2021-11-19 - 来自专栏Golang语言社区
Golang语言情怀--第128期 全栈小游戏开发:第19节：glTF 模型
URI 解析 Creator 支持 glTF 中指定以下形式的 URI： Data URI 相对 URI 路径 文件 URL 文件路径 转换关系 当导入 glTF 模型到 Creator 时，glTF 中的资源将会按照以下关系转换为 Creator 中的资源： glTF 资源 Cocos Creator 资源 glTF 场景 预制体 glTF 网格 网格 glTF 蒙皮 骨骼 glTF 材质 材质 glTF 贴图 贴图 glTF 图像 图像 glTF 动画 动画剪辑 glTF 场景 导入后，glTF 场景将转换为 Creator 中的预制体资源，glTF 场景中递归包含的节点也将按照相同层级关系一一转换为预制体中的节点 glTF 网格 导入后，glTF 网格将转换为 Cocos Creator 中的网格资源。 glTF 网格中的所有 基元体 将被一一转换为 Creator 中的子网格。 glTF 材质 导入后，glTF 材质将转换为 Cocos Creator 中的材质资源。 glTF 贴图 导入后，glTF 贴图将转换为 Cocos Creator 中的贴图资源。
72510编辑于 2023-12-11 - 来自专栏腾讯社交用户体验设计
如何在页面极速渲染3D模型
将模型导出为 glTF 格式 glTF 介绍 glTF 称为“ 3D 界的 JPEG”，使用了更优的数据结构，为应用程序实时渲染而生。 glTF 转换 目前有些建模工具还不具备导出 glTF 格式功能，可以输出 FBX / Collada 格式后通过以下工具进行转换： - FBX 转 glTF a. glTF 查看 转换后可通过以下查看工具查看 glTF 资源： - Windows 10及以上自带的 3D Paints； - glTF 在线查看器：https://gltf-viewer.donmccurdy.com 通过 Draco 进行压缩 Draco 及 gltf-pipeline 介绍 Draco 是 Google推出的一个用于 3D 模型压缩和解压缩的工具库，上述介绍的 FBX2glTF 及 COLLADA2GLTF 工具也嵌入了 Draco 压缩功能，除此之外，glTF 资源可通过基于 Draco 开发的命令行工具 gltf-pipeline 进行编码压缩，gltf-pipeline 可通过 npm 的方式安装使用
9.4K32发布于 2019-12-12 - 来自专栏用户9379088的专栏
Three.js 之 Import Model 导入模型
GLTF formats虽然 GLTF 就是一种格式，但是其内部包含了其他格式。 /assets/models/Duck/glTF/Duck.gltf', (gltf) => { console.log('success') console.log(gltf) }, /assets/models/Duck/glTF/Duck.gltf', (gltf) => { console.log('success') console.log(gltf) scene.add /assets/models/Duck/glTF/Duck.gltf', // '../assets/models/Duck/glTF-Binary/Duck.glb', '.. /assets/models/Duck/glTF-Embedded/Duck.gltf', (gltf) => { console.log('success') console.log(gltf
7.4K30编辑于 2022-08-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号