WEB 3D技术 three.js 色彩空间讲解

上文 WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图 我们讲了基础材质的各种纹理
但是 我们的图片
在这里插入图片描述
到了界面场景中 好像绿的程度有点不太一样了
在这里插入图片描述
这里的话 涉及到我们的色彩空间

他有两种 一种是线性的 一种是 sRGB类型的
在这里插入图片描述
线性呢 就是根据光照强度 去均匀分布的一种效果 sRGB 则是根据人眼的一个观察来调整颜色的
我们可以编写代码如下

let map = textureLoader.load("./public/logo.png");
map.colorSpace = THREE.SRGBColorSpace;
let planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff,side: THREE.DoubleSide,transparent: true,map: map,//specularMap: specularMap//lightMap: textureLoader.load("./public/background.jpg")
})

我们设置 map 图片对象 colorSpace 字段 SRGBColorSpace 就是设为 sRGB模式
这样 我们图片明显和人眼的一个效果更接近了
在这里插入图片描述

map.colorSpace = THREE.LinearSRGBColorSpace;

即可设置为线性类型
明显就会更白一些
在这里插入图片描述
一般来讲 暗度 线性是百分之十八左右 sRGB是百分之 五十左右 srgb会更接近你原图的颜色
我到觉得可以看期刊 有些时候 线性看着更真实 还是看情况选择
默认是线性的效果 具体可以看情况调整

这里 我还需要将一个对象 我们引入一下 GUI

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

然后 编写代码如下

let map = textureLoader.load("./public/logo.png");
map.colorSpace = THREE.LinearSRGBColorSpace;
const Igui = new GUI();
Igui.add(map,"colorSpace",{SRG8: THREE.SRGBColorSpace,Linear: THREE.LinearSRGBColorSpace,}
).onChange(() => {})

我们先引入图片 然后设置图片对象的 colorSpace 线性色彩 然后用GUI创建操作对象
操作map对象的 colorSpace字段 选择项分别是我们的 线性和sRGB模式

但是 我们实际操作 会发现 我们来回切换 图片色彩并没有变化
在这里插入图片描述GUI部分代码改一下

const Igui = new GUI();
Igui.add(map,"colorSpace",{SRG8: THREE.SRGBColorSpace,Linear: THREE.LinearSRGBColorSpace,}
).onChange(() => {map.needsUpdate = true;
})

简单说 修改前将图片对象的needsUpdate设置为true 告诉它纹理需要更新、

现在 我们再切换它
在这里插入图片描述
效果就非常明显了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/226811.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 NAS 上安装 ONLYOFFICE 文档?

文章作者:ajun 导览 ONLYOFFICE 文档 是一款开源办公套件,其是包含文本文档、电子表格、演示文稿、表单、PDF 查看器和转换工具的协作性编辑工具。它高度兼容微软 Office 格式,包括 .docx、.xlsx 、.pptx 、pdf等文件格式,并支持…

使用yolov5的2.0分支训练自己的模型并在x3派运行

目录 准备代码、权重、数据集配置环境准备数据标注数据 训练模型转换模型验证模型准备校准数据转换为板上模型模型精度分析 上板 之前训练自己模型的时候使用的是博主 bubbling的1.0分支的代码,博主的 博客比较详细,使用的是VOC2007数据集,…

ROS仿真R2机器人之安装运行及MoveIt的介绍

R2(Robonaut 2)是NASA美国宇航局与GM通用联合推出的宇航人形机器人,能在国际空间站使用,可想而知其价格是非常昂贵,几百万美刀吧,还好NASA发布了一个R2机器人的Gazebo模型,使用模型就不需要花钱了,由于我们…

Oracle查询重复数据取第二行,好用来删除重复数据

Oracle查询重复数据取第二行,好用来删除重复数据 SELECT * FROM ( SELECT e.* , ROW_NUMBER() over(PARTITION BY product_category_id,model_size_id ORDER BY product_category_id,model_size_id) rn FROM equ_check_rules e ) s WHERE rn 2;

《Spring Cloud学习笔记:Nacos配置管理 OpenFeign LoadBalancer Getway》

基于Feign的声明式远程调用(代码更优雅),用它来去代替我们之前的RestTemplate方式的远程调用 1. Nacos配置管理:Nacos Config 服务配置中心介绍 首先我们来看一下,微服务架构下关于配置文件的一些问题: 配置文件相…

计量经济学|学习笔记以及学习感悟

初级计量经济学着重于介绍基本的统计工具和经济模型,以帮助理解经济数据和经济现象之间的关系。它包括回归分析、假设检验和预测方法等内容。中级计量经济学则深入研究这些方法的理论基础和实际应用,包括更复杂的模型和技术,如面板数据分析、…

【验证概括 SV的数据类型_2023.12.18】

验证概括 验证的过程是保证芯片实现符合规格说明书(Specification,spec)的过程 验证的两项任务: RTL sim:前仿真,验证功能 GLS-Gate (Level Simulation):后仿真,验证功能和时序 验…

SourceTree的安装和使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、安装:二、使用步骤1.获取地址2.放入sourceTree 3.点击推送 前言 提示:这里可以添加本文要记录的大概内容: 简单讲解一…

SpringBoot 2 集成Spark 3

前提条件: 运行环境&#xff1a;Hadoop 3.* Spark 3.* ,如果还未安装相关环境&#xff0c;请参考&#xff1a; Spark 初始 CentOS 7 安装Hadoop 3 单机版 SpringBoot 2 集成Spark 3 pom.xml <?xml version"1.0" encoding"UTF-8"?> <pro…

stm32中的i2c协议

stm32中I2C 文章目录 stm32中I2CI2C 协议简介I2C物理层协议层I2C基本读写过程 **通讯的起始和停止信号****数据有效性****地址及数据方向****响应** STM32的I2C特性及架构**STM32** **的** I2C外设简介STM32 的 I 2C 架构剖析通讯引脚 通讯过程主发送器主接收器 I2C初始化结构体…

【数据结构】快速排序(4种方式实现)

前言&#xff1a;前面我们学习了几种相对比较简单的排序&#xff0c;今天我们要一起学习的是快速排序&#xff0c;我们将通过四种方式来模拟实现快排。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &#x1f4a…

【23.12.29期--Spring篇】Spring的 IOC 介绍

介绍一下Spring的IOC ✔️引言✔️ lOC的优点✔️Spring的IOC✔️ 拓展知识仓✔️IOC是如何实现的&#xff1f; ✔️引言 所谓的IOC (inversion of control) &#xff0c;就是控制反转的意思。何为控制反转? 在传统的程序设计中&#xff0c;应用程序代码通常控制着对象的创建和…

车载毫米波雷达及芯片新趋势研究2--“CMOS+AiP+SoC”与4D毫米波雷达推动产业越过大规模发展临界点

2.1 MMIC芯片工艺发展至CMOS时代&#xff0c;芯片集成度更高、体积与成本下降  MMIC芯片工艺经GaAs、SiGe已发展至CMOS时代&#xff0c;CMOS MMIC具有更低成本、更高集成度的优势。 工艺的主要变化发生在MMIC芯片的射频材料部分&#xff0c;目前SiGe仍为主流工艺。 SiGe虽在…

Maven配置教程

一&#xff1a;下载 Maven – Download Apache Maven 二&#xff1a;解压 三&#xff1a;修改setting 1.在<localRepository>标签内添加自己的本地位置路径 <!-- localRepository| The path to the local repository maven will use to store artifacts.|| Default:…

Redis主从

一、为何需要主从 单节点Redis的并发能力是有上限的&#xff0c;要进一步提高Redis的并发能力&#xff0c;就需要搭建主从集群&#xff0c;实现读写分离 二、如何设置主从 有临时和永久两种模式&#xff1a; 修改配置文件&#xff08;永久生效&#xff09; 在redis.conf中添…

网站服务器被入侵,如何排查,该如何预防入侵呢?

在我们日常使用服务器的过程中&#xff0c;当公司的网站服务器被黑客入侵时&#xff0c;导致整个网站以及业务系统瘫痪&#xff0c;将会给企业带来无法估量的损失。作为服务器的维护人员应当在第一时间做好安全响应&#xff0c;对入侵问题做到及时处理&#xff0c;以最快的时间…

【基础篇】八、Arthas实现热部署

文章目录 1、Arthas实现热部署2、示例3、注意点 1、Arthas实现热部署 实现热部署指的是在服务不停止的情况下&#xff0c;动态地更新字节码文件到内存中&#xff0c;即&#xff1a;把修复后的类的字节码文件更新到内存中&#xff0c;让类加载器重新加载 背景&#xff1a;修复了…

[RoarCTF 2019]Easy Java(java web)

题目 页面如下 页面长得像sql注入 点击help看一下 这里需要了解java web目录结构 WEB INF:Java的web应用安全目录&#xff1b; 此外如果想在页面访问WEB-INF应用里面的文件&#xff0c;必须要通过web.xml进行相应的映射才能访问&#xff1b; WEB-INF是Java Web应用程序中的一…

基于Python的短视频APP大学生用户数据分析预测

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目背景 本项目以国内高校大学生在一段时间内对某短视频平台的使用数据为基础。通过数据分析和建模方法&#xff0c;我们深入挖掘这些数据中所蕴含的信息&#xff0c;以实现对高校和大学生维度的统计分析。…

Modbus转Profinet,不会编程也能用!轻松快上手!

Modbus转Profinet是一种用于工业自动化领域的通信协议转换器&#xff0c;可以将Modbus协议转换为Profinet协议&#xff0c;实现设备之间的数据交换与通信。这个工具的使用非常简单&#xff0c;即使没有编程经验的人也可以轻松上手。即使不会编程的人也可以轻松快速上手使用Modb…