ThreeJs学习笔记【day10】材质 【2】

思乡码农
133 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情 >>

前言

上一篇讲的是材质的种类，总共列举了8种材质并对每种材质进行了介绍并根据个人理解对材质下了定义，本章就是围绕材质的实例化及使用，进行说明

材质属性的设置方式

  • 在实例化时设置
const material = new THREE.MeshPhongMaterial({
  color: 0xFF0000,    // 红色 (也可以使用CSS的颜色字符串)
  flatShading: true,
});
  • 在实例化之后设置
const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0, 1, .5);  // 红色
material.flatShading = true;

材质颜色的设置方式

  • 同 CSS的 #RRGGBB 风格
  • 任何 CSS 颜色字符串, 比如 'purple', '#F32','rgb(255, 127, 64)','hsl(180, 50%, 25%)'
  • 其他一些 THREE.Color对象
  • h,s,l方式的
  • r,g,b方式的
const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         // 红色
const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // 红色
const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // 红色
const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'});   // 红色
const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // 红色
material.color.set(0x00FFFF);    // 同 CSS的 #RRGGBB 风格
material.color.set(cssString);   // 任何 CSS 颜色字符串, 比如 'purple', '#F32',
                                 // 'rgb(255, 127, 64)',
                                 // 'hsl(180, 50%, 25%)'
material.color.set(someColor)    // 其他一些 THREE.Color
material.color.setHSL(h, s, l)   // 其中 h, s, 和 l 从 0 到 1
material.color.setRGB(r, g, b)   // 其中 r, g, 和 b 从 0 到 1

各种材质的属性需要特别注意的部分

  • MeshPhongMaterial的 shininess 设置决定了镜面高光的光泽度。它的默认值是30，简单来说，就是 高亮的程度。越大 ，越亮

image.png

  • emissive 材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色，当高亮shininess为0，反射光一致的时候，MeshLambertMaterial、MeshPhongMaterial、MeshBasicMaterial这三种材质，看起来一毛一样

image.png

  • 补充：上一章漏掉了一种基础材质MeshToonMaterial，这个是一个由双色渐变组成的材质，这个就很像卡通画的材质

image.png

  • MeshStandardMaterial 物理材质渲染有两个属性来决定高光效果，一个是roughness 定义的是物体表面的粗糙程度，粗糙度的范围从0到1，和shininess所表达的正好相反,还有一个属性是metalness，metal 金属 金属化的意思，所以metalness指的就是材质的金属度，金属与非金属的表现不同。0代表非金属，1代表金属。下图中，粗糙度从左至右，从0到1，金属度，从上到下，从0到1

image.png

  • 上一章提过，MeshPhysicalMaterial比MeshStandardMaterial多一个属性Clearcoat，清漆效果，所以他还有两个属性，一个是Clearcoat表示clear coat层的强度，范围从0.0到1.0m，当需要在表面加一层薄薄的半透明材质的时候，可以使用与clear coat相关的属性，默认为0.0;还有一个是clearcoatRoughness，决定的是图层的粗糙程度从0到1，默认是0
  • flatShading 材质的通用属性，是否对平面应用着色，为true时，会展现出构成立方体的细节，会把线段绘制出来

image.png

  • side 材质的通用属性，要展示那个面，默认是FrontSide，因为大部分立方体都不透明，不需要看到反面

image.png

后记

材质中还有大量细节需要关注，特别是 纹理我们没有考虑过，接下的学习将会逐步的深入这些内容，包括之前挂起来的深度材质，阴影材质，自定义着色器材质等等。。。

avatar
文章
阅读
粉丝