解决threeJS加载obj gltf模型后颜色太暗的方法

目录
  • 网上找到的部分解决方法
  • 效果对比
  • 总结

网上找到的部分解决方法

其实通过查找后不难发现网上给出了很多解决方法，但是大部分都无法从根本上解决问题。我之前看到有一篇文章对gltf的解决方法是让gltf增加自发光，相关的设置如下：

使用threeJS的过程中，刚开始总是会遇到些问题，就比如加载obj/gltf等带材质的模型时老是会出现显示效果较暗的问题。

object.traverse((child) => {
  if(child.isMesh) {
    child.material.emissiveMap = child.material.map;
  }
})

效果对比

在我也没有找到解决的办法下，我确实是使用了这种方法，正如我写的vue-3d-loader组件中，前期的代码中就是采用的这种方式，我们可以来看一下使用后的效果：

未使用以上代码时的gltf效果如下图：

windows11 中 3d viewer打开后的效果如下：

这一对比，差距确实很大啊。

下面是增加child.material.emissiveMap = child.material.map;代码后的效果：

这种方式，虽然光线看上去足够了，但是确丢失了细节以及发光太严重后，导致图像都失真了。经过与官方的代码的对比以及官方文档的查看，当然少不了github issue的查找，最终找到解决方法。

据官方文档所说WebGLRenderer部分，其中文档提到：

  • outputEncoding默认值是LinearEncoding

根据官方提供的examples中代码中也看到部分加载材质后的模型都修改了这个值，如下：

因此我确定，解决办法就是将LinearEncoding更换为sRGBEncoding即可。

修改代码后，可以直接看到效果如下：

可以自己在增加一些灯光效果，也就可以达到windows的3d viewer效果了

总结

默认情况下threeJS会使用线性编码（LinearEncoding）的方式渲染材质，因此会丢失真实颜色，需要改用RGB模式编码（sRGBEncoding）进行对材质进行渲染。

使用threeJS总是会遇到各种问题，不过我的建议还是多看看官方的examples代码，你会从中找到更多解决的方法的。如果你不是自己封装threeJS，那可以使用我编写好的vue-3d-loader，如果好用，记得给我start啊！记得给我start啊！如果有问题，欢迎提issue，我会及时解决bug

以上就是解决threeJS加载obj gltf模型后颜色太暗的方法的详细内容，更多关于threeJS加载obj gltf颜色太暗的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用threejs实现第一人称视角的移动的问题(示例代码)

    使用threejs实现第一人称视角的移动的问题(示例代码)

    在数据可视化领域利用webgl来创建三维场景或VR已经越来越普遍,各种开发框架也应运而生.今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能.如果你是一位threejs的初学者或正打算入门,我强烈推荐你仔细阅读本文并在我的代码基础之上继续深入学习.因为它将是你能够在网上找到的最好的免费中文教程,通过本文你可以学习到一些基本的三维理论,threejs的api接口以及你应该掌握的数学知识.当然要想完全掌握threejs可能还有很长的路需要走,但至少今天我将带你入门并传授一些独特的学

  • vue3中如何用threejs画一些简单的几何体

    vue3中如何用threejs画一些简单的几何体

    目录 前言 threejs简述 依赖包版本 vue3操作DOM 创建场景,相机,渲染器本节及后续都在initThree方法中写 立方体 球体 圆柱体 坐标系 点光源 鼠标操作旋转,缩放 球体,立方体自动旋转 initThree完整代码 总结 前言 在vue3中使用threejs画了几个最简单的几何体,自动旋转的立方体,圆柱体,球体,并且加入了光照,几何体影阴部分即光没照到的地方,成果如下,感兴趣的可以看看具体实现过程~ threejs简述 Three.js是基于原生WebGL封装运行的三维引擎

  • 如何用threejs实现实时多边形折射

    如何用threejs实现实时多边形折射

    前言 在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃. 渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观. 可以使用Three.js之类的库中的现成程序来模仿许多类型的材料,但是在本教程中,我将向您展示如何使用三个对象(三个步骤)使对象看起来像玻璃一样. 步骤1:设定和正面折射 在本演示中,我将使用菱形几何图形,但是您可以跟随一个简单的盒子或任何其他几何图形. 让我们建立我们的项目.我们需要一个渲染器

  • threejs后期处理的基本使用方法之加特效

    threejs后期处理的基本使用方法之加特效

    目录 前言 基本代码 基本流程 核心函数介绍 EffectComposer 效果组合器 构造函数 重要方法: RenderPass 渲染通道 构造函数 重要属性: ShaderPass 着色器通道 官方案例 链接 通道相关代码位置 案例演示 电脉冲故障风效果 代码 描边效果 代码 泛光效果 BloomPass的参数 代码 总结 前言 后期处理:简单的说就是先渲染一张图存起来,在这张图上面"添油加醋",处理完后再渲染到屏幕上.这一过程three进行了封装,使用现成的可以更快实现需求 基本

  • 利用vue3+threejs仿iView官网大波浪特效实例

    利用vue3+threejs仿iView官网大波浪特效实例

    目录 前言 一.效果图 二.代码 三.背景图片素材 总结 前言 Threejs可以理解为是一个web端三维引擎(渲染模型,数据可视化),如果有接触过UnralEngine 4(虚幻四)等游戏引擎的,应该很容易理解在一个三维场景必备的每一个部件(场景,渲染器,网格模型,材质,光源,色相机).好的,基础知识咱们先跳过,直接上实现的过程 一.效果图 先上最终效果图: 具体效果可参考iview官方界面iView - 一套高质量的UI组件库 大波浪效果,使用的是three.js的官方例子,需要先安装thr

  • threejs太阳光与阴影效果实例代码

    threejs太阳光与阴影效果实例代码

    目录 前言 灯光与材质基础篇 太阳光 整体调用代码 太阳光类 初始化 设置平行光信息 Tween 总结 前言 这篇文章实现智慧城市中模拟太阳光随时间变化产生对应场景效果.为了场景能够更逼真,我们一般会通过对接天气以及阳光等各种环境因素同步到场景中,使得场景能够更贴近现实.比如一些常见的天气系统,下雨.下雪.阴天.雾霾等,我之后会独立一篇文章中提现.这边文章主要介绍一系列灯光,主要是平行光对于太阳的模仿,以及一些材质的问题~ 灯光与材质基础篇 常见的灯光: - 点光源 (点光源可以理解为一个同时向

  • 解决threeJS加载obj gltf模型后颜色太暗的方法

    解决threeJS加载obj gltf模型后颜色太暗的方法

    目录 网上找到的部分解决方法 效果对比 总结 网上找到的部分解决方法 其实通过查找后不难发现网上给出了很多解决方法,但是大部分都无法从根本上解决问题.我之前看到有一篇文章对gltf的解决方法是让gltf增加自发光,相关的设置如下: 使用threeJS的过程中,刚开始总是会遇到些问题,就比如加载obj/gltf等带材质的模型时老是会出现显示效果较暗的问题. object.traverse((child) => { if(child.isMesh) { child.material.emissive

  • 解决docker加载新的镜像后repository和tag名称都为none的问题

    可以使用命令: docker tag [image id] [name]:[版本] 例如: docker tag b03b74b01d97 docker-redis:0.0.1 补充知识:docker的save和load 我就废话不多说了,大家还是直接看代码吧~ 实战 [root@localhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE clearlinux latest 32685d114002 7 days ago 62

  • three.js加载obj模型的实例代码

    three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择.好了,下面通过一段代码给大家介绍three.js加载obj模型,具体代码如下所示: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="libs/three.js"></script> &l

  • 解决Pytorch 加载训练好的模型 遇到的error问题

    这是一个非常愚蠢的错误 debug的时候要好好看error信息 提醒自己切记好好对待error!切记!切记! -----------------------分割线---------------- pytorch 已经非常友好了 保存模型和加载模型都只需要一条简单的命令 #保存整个网络和参数 torch.save(your_net, 'save_name.pkl') #加载保存的模型 net = torch.load('save_name.pkl') 因为我比较懒我就想直接把整个网络都保存下来,然

  • keras 解决加载lstm+crf模型出错的问题

    错误展示 new_model = load_model("model.h5") 报错: 1.keras load_model valueError: Unknown Layer :CRF 2.keras load_model valueError: Unknown loss function:crf_loss 错误修改 1.load_model修改源码:custom_objects = None 改为 def load_model(filepath, custom_objects, c

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • swiper 解决动态加载数据滑动失效的问题

    两种解决方法 1.数据加载后进行swiper初始化 success:function(result){ var resultdata =eval("("+result+")"); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; pageCount = resultdata.pageCount; var html = &q

  • 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

  • pytorch实现从本地加载 .pth 格式模型

    可以从官网加载预训练好的模型: import torchvision.models as models model = models.vgg16(pretrained = True) print(model) 但是经常会出现因为下载速度太慢而出现requests.exceptions.ConnectionError: ('Connection aborted.', TimeoutError(10060, '由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败.', None, 1

  • 解决SpringBoot加载application.properties配置文件的坑

    解决SpringBoot加载application.properties配置文件的坑

    SpringBoot加载application.properties配置文件的坑 事情的起因是这样的 一次,本人在现场升级程序,升级完成后进行测试,结果接口调用都报了这么个错误: 大概意思是https接口需要证书校验,这就奇怪了,项目启动加载的是包外的application.properties配置文件,配置文件里没有配置使用https啊.本人马上检查了下包内的application.properties配置文件,发现包内确实配置了https相关的配置项: 明明包外的配置文件优先级高于包内的,为

随机推荐