ThreeJS 引入GLb文件后报警告 Unknown extension “KHR_materials_pbrSpecularGlossiness“.

最新推荐文章于 2024-04-09 09:37:18 发布
最新推荐文章于 2024-04-09 09:37:18 发布
阅读量628 收藏 1
点赞数
文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43865334/article/details/131461149
版权

1. 最开始正常引入文件：

控制台报错，

Unknown extension "KHR_materials_pbrSpecularGlossiness".

模型没有材质，纹理

2.  转化一下模型的源文件

npm install --global @gltf-transform/cli
gltf-transform metalrough Bee.glb output.glb

3. 更换loader的源文件"/Bee.glb"，，改为"output.glb" ，

最终效果图如下：

 

 还有错，这是代码的问题待解决.

参考文章： THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"_echohye的技术博客_51CTO博客

被高端技术封印的小柯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
three官网的glb示例文件.rar
12-21
【标题】"three官网的glb示例文件.rar" 是一个包含了来自three.js官方网站的GLB格式示例文件的压缩包。three.js是一款基于WebGL的JavaScript 3D库，广泛用于网页上的交互式3D图形开发。GLB是3D模型的一种文件格式，...
ThreeJS加载glb模型实用案例
01-26
1. **引入Three.js库**：在HTML文件中，你需要通过`<script>`标签引入Three.js库，或者使用CDN链接。例如： ```html <script src="https://threejs.org/build/three.min.js"> <script src="https://threejs.org/...
解决 Threejs 无法加载 GLTF 模型的材质，报错 Unknown extension “KHR_materials_pbrSpecularGlossiness
weixin_38581127的博客
05-30 2464
threejs 的版本是0.147.0。使用 GLTFLoader 加载 GLTF 模型文件发现材质（Material）没有显示。
THREE.GLTFLoader: Unknown extension “KHR_materials_pbrSpecularGlossiness“.
github_38424391的博客
07-12 528
【代码】THREE.GLTFLoader: Unknown extension “KHR_materials_pbrSpecularGlossiness“.
threejs加载GLTF
qq_40994735的博客
02-16 1817
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器 initModel() { let self = this; var loader = new GLTFLoader(); loader.load("/static/obj/2.gltf", function(gltf) { //创建纹理 self.scene.ad
three.js 加载gltf模型的简化demo
做GIS梦的人
09-17 6031
目录前言下载依赖改造插件主要代码效果 前言 最近需要做一个three.js加载三维模型的，才发现three.js的官网和网上的示例挺乱的。甚至有人说把three.js的全部demo下载下来，替换其中的页面，学习者自己操作起来挺难的。这里我就已在vue项目中为例，介绍一下如何实现使用three.js加载三维模型。 下载依赖 npm install three --save 改造插件 three.js官网demo里提供了加载gltf模型的插件，但是这里需要改造一下 GLTFLoader.js import
three加载glb模型报错Uncaught SyntaxError: Unexpected token ‘＜‘
weixin_48724903的博客
01-22 142
three加载glb模型报错Uncaught SyntaxError: Unexpected token '
压缩gltf/glb模型踩坑与解决 three.js DRACOLoader
热门推荐
lgldl的博客
03-09 1万+
前言 使用前端three.js加载3d模型过程中，往往会出现模型大小过大导致前端加载时间过长，降低用户体验。 本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。 所采用的three库版本为 ^0.138.2 解决方案与介绍 通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。 并且有如下的作用 将 glTF 转换为 glb（和反向） 将缓冲区/纹理保存为嵌入或单独的文件 将 glTF 1.0 模型转换为 glTF 2.0（使用KH
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在描述中提到的问题是用户可能在寻找如何在Three.js中正确地显示PCD文件。 首先，我们来理解一下PCD文件格式。PCD...
Cesium三维模型（电塔）glb格式，亲测可用
12-14
glb文件，供学习使用。原型来源网络，亲测可用！！！！！！！！！
libgltf:适用于C ++ 11的glTF 2.0 parserloader支持许多扩展，例如`KHR_draco_mesh_compression`，`KHR_lights_punctual`，`KHR_materials_clearcoat`等。
05-08
KHR_materials_pbrSpecularGlossiness KHR_materials_clearcoat 和更多 平台类 视窗 Win32（Win32） x64（win64） Linux（Linux） macOS（macos） 安卓 armeabi-v7a 带有霓虹灯的armeabi-v7a arm64-v8a ...
【愚公系列】2022年09月 微信小程序-three.js加载3D模型
时光隧道
09-13 1万+
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。Three.js相关文档：http://docs.thingjs.com/ 安装第三方包： 二、3D模型相关js文件 三、效果图 四、总结 three.js画一个图形主要经历如下八个步骤：
GLTF/GLB模型轻量化简明教程
新缸中之脑
06-01 3041
GLB 文件格式很方便，因为它包含渲染所需的所有文件，包括纹理。 但是，根据用途，你可能希望简化文件，因为它有时非常详细。在本文中，我将使用 gltf-transform 来执行简化，并且假设你使用的是 Windows。要安装 gltf-transform，你需要 Node.js。 Node.js 是许多网站和工具使用的 JavaScript 运行时环境。 可以从这里下载Node。js。 除非有特殊需要，否则请使用 LTS 版本。在安装过程中，接受默认值，因为它们足以满足我们正在做的事情。现在，我们需要安装
GLTF扩展使用及开发指南
新缸中之脑
09-12 495
glTF 扩展扩展了基本 glTF 模型格式。扩展可以引入新的属性（包括引用外部数据的属性，并且扩展可以定义这些数据的格式）、新的参数语义、保留的 ID 和新的容器格式。扩展是针对特定版本的 glTF 编写的，并且可能会在更高版本的 glTF 中提升为核心 glTF。glTF广泛应用于Web上的3D展现，如果你需要将模型转换为glTF格式，可以使用NSDT 3DConvert的。
glTF-Transform处理gltf模型
地理信息技术杂谈 博客，欢迎技术交流
08-26 1515
glTF-Transform支持读取、编辑、创建gltf2.0格式的三维模型，glTF-Transform提供对三维模型中低细节的快速、可再现和无损控制；glTF-Transform API实现在编辑三维模型时，自动管理数组索引和字节偏移量，这些特性，能够方便对三维模型进行合并、拆分和优化；@gltf-transform/core：核心SDK类库，提供gltf2.0模型创建、读取和编辑的API；@gltf-transform/functions: gltf2.0模型的修改、读取函数API；...
推荐项目：glTF-Transform - 高效的glTF模型处理库
最新发布
gitblog_00036的博客
04-09 681
推荐项目：glTF-Transform - 高效的glTF模型处理库 项目地址:https://gitcode.com/donmccurdy/glTF-Transform glTF-Transform是一个强大而灵活的命令行工具和JavaScript库，专为处理和优化glTF（通用传输格式）3D模型而设计。glTF是Web上最常用的开放标准，用于在多个平台之间传输高质量的3D内容。本文将深入探讨g...
【Web】使用Three.js制作有数据源控制的3D模型动画
huanqing2010的专栏
05-19 1993
懒得写了，大概记录下步骤。 1. 使用开源软件Blender制作3D模型 Blender类似于3DMax、Maya，是制作3D模型的工具软件，较难使用，无法制作精确尺寸模型，学习资料匮乏，仅有B站有少量优质教学视频。 导出格式选择 gltf 或 glb，该格式包含模型、灯光、材质等信息，并且最重要的是此格式是 Three.js 推荐支持格式。该格式也是开源格式。 2. 使用 Three.js 控制3D模型 ...
threejs封装加载 .glb 格式模型，修改贴图
前端
11-11 3509
threejs封装加载 .glb 格式模型，修改贴图
cesium加载shp文件
07-27
在Cesium中加载shp文件可以使用Cesium VectorTileImageryProvider。首先，你需要下载CesiumVectorTile.js文件并在index.html中引入。然后，你可以使用以下代码来加载shp文件： ```javascript var VectorTileImageryProvider = Cesium.VectorTileImageryProvider; function addshp() { line_gaosuDL = new VectorTileImageryProvider({ source: "./SampleData/shp/Province_R_2.shp", defaultStyle: { outlineColor: "rgb(101, 255, 67)", lineWidth: 5, }, }); line_gaosuDL.readyPromise.then(function() { viewer.imageryLayers.addImageryProvider(line_gaosuDL); }); } ``` 这段代码会创建一个VectorTileImageryProvider对象，并指定shp文件的路径。你可以根据自己的需求修改路径和样式。然后，通过调用readyPromise来确保shp文件加载完成后再将其添加到Cesium的图层中。 #### 引用[.reference_title] - *1* [cesium加载shp文件](https://blog.csdn.net/weixin_43043994/article/details/131399172)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [【超图】SuperMap iClient3D for Cesium 加载SHP文件](https://blog.csdn.net/weixin_42532695/article/details/127897229)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [shp文件读取并利用cesium进行可视化](https://blog.csdn.net/leekuikui/article/details/130075953)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被高端技术封印的小柯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值