【three.js】材质(Material)

基础网格材质(MeshBasicMaterial)【常用】

一个以简单着色(平面或线框)方式来绘制几何体的材质,这种材质不受光照的影响。常用于背影、2D图形等场景。

参数

color:材质颜色。

opacity:透明度,取值范围为0(完全透明)到1(完全不透明)。

transparent:布尔值,指示材质是否透明。如果设置为true,则材质将考虑透明度的影响。

map:纹理贴图。

示例

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


网格材质(MeshLambertMaterial)【常用】

一种非光泽表面的材质,没有镜面高光。适用于模拟一些表面(如未经处理的木材或石材),但不能模拟具有镜面高光的光泽表面。

受光照影响—— 漫反射

参数(继承自THREE.Material):

color:材质颜色。

map:纹理贴图。

alphaMap:透明度贴图。

emissive:自发光颜色。

示例

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

网格材质(MeshPhongMaterial)

支持漫反射和镜面反射光照模型,可以模拟物体表面对光线的漫反射和镜面反射效果。相比于Lambert材质,效果较好,但性能开销较大。

受光照影响——高光

参数

color:材质颜色。

specular:镜面反射颜色。

shininess:光泽度,控制镜面高光的大小。

示例

const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, specular: 0x111111, shininess: 30 
});

法线网格材质(MeshNormalMaterial)【拓展:不常用】

根据法向向量来计算物体表面的颜色。这种材质可以显示网格的法线方向,常用于调试或特殊效果。

注意:法线材质并不支持镜面反射,这里的描述有误。正确的描述应该是它直接显示法线的方向,颜色通常与法线的方向有关。

示例

const material = new THREE.MeshNormalMaterial();

物理材质(MeshStandardMaterial)

一种高度可配置的材质,专为基于物理的渲染(PBR)设计。通过调整金属度、粗糙度等参数,可以模拟出从非金属到金属的各种材质效果。

受光照影响——物理材质

参数

color:材质颜色。

metalness:金属度,取值范围为0(非金属)到1(金属)。

roughness:粗糙度,取值范围为0(光滑)到1(粗糙)。

map:漫反射贴图。

envMap:环境贴图。

示例

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0, roughness: 0.5 
});

物理材质(MeshPhysicalMaterial)

MeshPhysicalMaterial是Three.js中一种基于物理的材质类型,它提供了更多的物理属性来模拟现实世界中的材料特性。

与MeshStandardMaterial相比,MeshPhysicalMaterial具有额外的物理属性,如清漆层、透光率、反射率、光泽、折射率等,使其更适合模拟具有特定光学特性的材料,如透明材料、半透明材料等。

受光照影响——物理材质

参数

color:基础颜色,默认为白色(0xffffff)。

map:基础颜色贴图,可以用来替代材质的颜色。

roughness:粗糙度,默认为0.5。粗糙度定义了表面的光滑程度,数值越高,表面越粗糙。

metalness:金属度,默认为0.5。金属度定义了表面的金属程度,数值越高,表面越像金属。

emissive:自发光颜色,默认为黑色(0x000000)。即使在没有光源的情况下,也会显示这个颜色。

clearcoat:清漆层厚度,默认为0。定义了表面的额外涂层,通常用于模拟汽车油漆的效果。

clearcoatRoughness:清漆层粗糙度,默认为0。定义了清漆层的粗糙程度。

ior(Index of Refraction):折射率,默认为1.5。定义了材料的折射率,对于透明或半透明材料特别重要。

transmission:透射,默认为0。定义了光线透过材料的程度,对于透明或半透明材料特别重要。

其他:还包括normalMap(法线贴图)、roughnessMap(粗糙度贴图)、metalnessMap(金属度贴图)、emissiveMap(自发光贴图)、alphaMap(透明度贴图)、displacementMap(置换贴图)等纹理贴图属性,以及opacity(全局透明度)、transparent(是否开启透明模式)、side(指定材质在哪一面渲染)等通用属性。

适用于汽车油漆效果、玻璃、水、金属等材质的创建。

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);// 加载基础颜色贴图
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');// 创建 MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial({map: colorTexture,         // 基础颜色贴图color: 0xffffff,           // 基础颜色(这里会被贴图覆盖,但可用于没有贴图的部分)emissive: 0x000000,        // 自发光颜色metalness: 0.5,            // 金属度roughness: 0.5,            // 粗糙度transmission: 1,           // 启用透射ior: 1.5,                  // 折射率thickness: 0.1,            // 厚度(对于透射效果重要)side: THREE.DoubleSide     // 双面渲染
});// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


MeshToonMaterial

这种材质使用卡通渲染效果,通常用于游戏和动画中。通过梯度纹理来控制阴影效果。

参数

color:材质颜色。

gradientMap:梯度纹理,用于卡通阴影效果。

示例

const gradientTexture = new THREE.TextureLoader()
.load('path/to/gradient.png');
const material = new THREE.MeshToonMaterial({ color: 0x00ff00, gradientMap: gradientTexture 
});


ShaderMaterial

        通过自定义着色器来创建材质,适用于需要高级图形效果的情况。需要编写顶点和片段着色器代码。

参数

vertexShader:顶点着色器代码。

fragmentShader:片段着色器代码。

示例

const vertexShader = `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}
`;const fragmentShader = `varying vec2 vUv;void main() {gl_FragColor = vec4(vUv, 0.5, 1.0);}
`;const material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader
});

线基础材质(LineBasicMaterial)

用于线条几何体的基本材质。

参数

color:线条颜色。

linewidth:线条宽度(注意:在某些设备上可能不支持,默认为1)。

示例

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-10, 0, 0),new THREE.Vector3(0, 10, 0),new THREE.Vector3(10, -10, 0)
]);
const line = new THREE.Line(geometry, material);
scene.add(line);


注意linewidth参数在某些渲染器和设备上可能不起作用,如果需要更粗的线条,可以考虑使用其他方法,如创建多边形来模拟线条。

LineDashedMaterial

用于创建虚线效果的材质。

参数

color:线条颜色。

dashSize:虚线的线段长度。

gapSize:虚线的间隔长度。

scale:缩放比例,用于调整虚线的密度。

示例

const material = new THREE.LineDashedMaterial({ color: 0xff0000, dashSize: 3, gapSize: 1, scale: 1 
});

点材质(PointsMaterial)

用于点云(点几何体)的材质。

参数

color:点的颜色。

size:点的大小。

map:点的纹理贴图(注意:在某些情况下可能不支持)。

示例

const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-10, 10, 0),new THREE.Vector3(-10, -10, 0),new THREE.Vector3(10, -10, 0)
]);
const points = new THREE.Points(geometry, material);
scene.add(points);


请注意,示例代码中的路径和参数可能需要根据实际情况进行调整。

精灵材质(SpriteMaterial)

SpriteMaterial是Three.js中的一种材质类型,用于创建二维精灵(Sprite)。

精灵材质常用于渲染图标、粒子系统、UI元素等。

与普通的三维材质不同,SpriteMaterial通常与Sprite对象一起使用,它不支持光照模型,也不考虑摄像机的方向,总是面向摄像机展示其纹理。

参数

map:基础颜色贴图,用于定义精灵的外观。

color:基础颜色,默认为白色(0xffffff)。

opacity:材质的全局透明度,默认为1(不透明)。

transparent:是否开启透明模式,默认为true。如果设置为true,则需要设置opacity或者使用alphaMap。

blending:混合模式,默认为THREE.NormalBlending。可以设置为THREE.AdditiveBlending、THREE.SubtractiveBlending等。

sizeAttenuation:是否启用尺寸衰减,默认为true。如果启用,则精灵的大小会根据距离摄像机的距离自动调整。

rotation:旋转角度,默认为0。用于控制精灵的旋转角度。

其他:还包括depthTest(是否进行深度测试)、depthWrite(是否写入深度缓冲区)、toneMapped(是否进行色调映射)、fog(是否应用雾效)等属性。

应用场景

SpriteMaterial适用于需要快速实现图标、粒子系统、UI元素等二维元素的场景。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load('path/to/sprite_texture.png');// 创建 SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({map: spriteTexture,          // 基础颜色贴图color: 0xffffff,             // 基础颜色(这里会与贴图混合)opacity: 0.5,                // 透明度transparent: true,           // 开启透明模式sizeAttenuation: false,      // 禁用尺寸衰减(精灵大小不会随距离变化)rotation: Math.PI / 4        // 旋转45度
});// 创建 Sprite
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(100, 100, 1);  // 设置精灵的大小(X和Y方向上的大小,Z方向通常保持为1)
sprite.position.set(0, 0, 0);   // 设置精灵的位置
scene.add(sprite);

友友们的每一次点赞,都是对我莫大的支持与激励!

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

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

相关文章

【数据库系列】Spring Boot 中整合 MyBatis-Plus详细步骤

在 Spring Boot 中整合 MyBatis-Plus 可以按照以下步骤进行: 一、整合步骤 1. 创建 Spring Boot 项目 首先,使用 Spring Initializr(https://start.spring.io/)创建一个新的 Spring Boot 项目。在创建过程中,选择以…

naive ui 使用地址记录

naive ui 地址Naive UI Naive UI 是一个 Vue3 的组件库。 要了解如何安装,参见安装。 它比较完整,主题可调,用 TypeScript 写的,快

CVSS漏洞评分系统曝出严重缺陷

在网络安全领域,漏洞的管理和评估是企业防御的重要一环。然而,随着技术的快速发展和攻击手段的不断演变,传统的漏洞评分系统显露出了不可忽视的弊端。在近期的Black Hat欧洲大会上,摩根大通的网络安全专家警告称,通用漏…

深入剖析MySQL数据库架构:核心组件、存储引擎与优化策略(一)

sql语句分为两大类:查询(select)、增删改----修改(update) select语句的执行流程 执行sql语句的流程:连接数据库、缓存查询、解析器、优化器、执行器、存储引擎操作数据 客户端:图形界面工具…

电子病历四级视角下SQL语句的优化策略与实践用例研究

一、引言 1.1 研究背景与意义 在当今数智化医疗时代,电子病历(Electronic Medical Record,EMR)系统已成为医疗机构信息化建设的核心组成部分。电子病历不仅承载着患者的诊疗信息,更是医疗决策、质量控制、科研分析以及医疗管理的重要依据。根据国家卫生健康委发布的《电…

如何借助 AI 提升工作效率

AI让工作更高效 引言 你是否曾在忙碌的工作中感到力不从心,无法高效完成任务?在如今这个信息爆炸的时代,时间似乎总是不够用。而幸运的是,人工智能(AI)的崛起让这一切发生了变化。AI的应用正日益深入我们…

C++简明教程(14)动态库和静态库的内存共享机制

总结,动态库共享内存,静态库独占一份内存。

NextCloud服务安装与配置教程

NextCloud服务安装与配置教程 什么是 NextCloud: Nextcloud 是一款开源的私有云存储和协作平台,允许用户在自己的服务器上托管数据并管理团队协作。它可以作为一个功能丰富、安全可靠的替代方案,与商业云服务(如 Google Drive、Dropbox)相比提供更多控制和隐私保护。简单来…

Elasticsearch向量检索需要的数据集以及768维向量生成

Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一:使用fromsize实现分页 快速掌握Elasticsearch检索之二:滚动查询(scrool)获取全量数据(golang) Elasticsearch检索之三:官方推荐方案search_after…

CSS2笔记

一、CSS基础 1.CSS简介 2.CSS的编写位置 2.1 行内样式 2.2 内部样式 2.3 外部样式 3.样式表的优先级 4.CSS语法规范 5.CSS代码风格 二、CSS选择器 1.CSS基本选择器 通配选择器元素选择器类选择器id选择器 1.1 通配选择器 1.2 元素选择器 1.3 类选择器 1.4 ID选择器 1.5 基…

Prometheus 专栏 —— Prometheus安装、配置

配置文件基本结构 global: 全局配置 scrape_interval: 抓取目标指标的频率,默认为 1minevaluation_interval: 评估告警规则的频率,默认为 1minscrape_timeout: 抓取目标指标数据拉取超时,默认为 10s,如果出现 context deadline exceeded 错误时需要在特定的 job 下配置该字…

基于AT89C51单片机的可暂停八路抢答器设计

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/90196607?spm1001.2014.3001.5503 C15 部分参考设计如下: 摘要 随着社会进步和科技发展,电子设备在各类活动中的应用日益普遍&#xff0c…

【python】unittest单元测试

文章目录 基本使用不同启动方式的区别 基本使用 下面是根据文档写的一个demo,主要的内容基本都包含了,使用时导入自己的业务类测试类中的方法就行。 import unittest# 测试类不强制test开头,仅作为规范。但必须继承unittest.TestCase class…

MySQL实用SQL示例

创建数据库 CREATE DATABASE zq-cloud CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;创建表 CREATE TABLE regulatory_firm_category (category_id int NOT NULL AUTO_INCREMENT COMMENT 分类id,自增主键,parent_id int NOT NULL COMMENT 父级id,category_…

从0入门自主空中机器人-4-【PX4与Gazebo入门】

前言: 从上一篇的文章 从0入门自主空中机器人-3-【环境与常用软件安装】 | MGodmonkeyの世界 中我们的机载电脑已经安装了系统和常用的软件,这一篇文章中我们入门一下无人机常用的开源飞控PX4,以及ROS中无人机的仿真 1. PX4的安装 1.1 PX4固件代码的下载…

数据结构与算法之动态规划: LeetCode 674. 最长连续递增序列 (Ts版)

最长连续递增序列 https://leetcode.cn/problems/longest-continuous-increasing-subsequence/description/ 描述 给定一个未经排序的整数数组,找到最长且 连续递增的子序列,并返回该序列的长度连续递增的子序列 可以由两个下标 l 和 r(l …

SqlSession的线程安全问题源码分析

🎮 作者主页:点击 🎁 完整专栏和代码:点击 🏡 博客主页:点击 文章目录 SqlSession 是线程安全的吗?为什么说是线程不安全的?事务管理问题 数据库连接的共享问题 一级缓存线程安全问题…

Unity Mesh生成Cube

1. 配置一个Cube的每个面的数据 一共是6个面,每个面包含的数据包括4个顶点的相对顶点坐标(Cube的中心为原点),法线方向,UV坐标,顶点渲染顺序,以及这个面用到的材质,因为这里是Top&am…

小程序组件 —— 22 组件案例 - 轮播区域绘制

这一节我们实现轮播图最外层的盒子,也就是把轮播图的最外层搭好,先不给轮播图添加图片,因为图片属于新的组件,组件里面有一些知识点,需要单独分开讲; 回顾一下,在进行传统网页开发时&#xff0…

【文献精读笔记】Explainability for Large Language Models: A Survey (大语言模型的可解释性综述)(二)

****非斜体正文为原文献内容(也包含笔者的补充),灰色块中是对文章细节的进一步详细解释! 3.1.2 基于注意力的解释(Attention-Based Explanation) 注意力机制可以揭示输入数据中各个部分之间的关系&#…