3.Three.js光与材质

目录

一、光

1.光的概述

(1)光源分类

(2)光线反射

2.实例

二、材质

1.材质概述

(1)材质分类

(2)纹理映射

2.实例

3.常用属性

---

一、光

1.光的概述

(1)光源分类

• 基础：环境光、点光源、聚光源、平行光

• 特俗用途：半球光源、镜头光晕

(2)光线反射

• 镜面反射(高光)  镜面反射反射的光线相对集中些 MeshPhongMaterial

• 漫反射         漫反射会讲光线分开反射 MeshLambertMaterial

• PBR(物理反射)  能够模拟复杂的光照效果，如金属、玻璃等。MeshStandardMaterial

• 不受光照影响    MeshBasicMaterial

口诀：做逼真效果就贴图，材质就选PBR，PBR一节更比六节强。

2.实例

import * as THREE from 'three';
import Lensflare from 'three/examples/jsm/objects/Lensflare'

// 环境光(特点:没有光源的来源方向,也不会产生阴影)
const ambient = new THREE.AmbientLight('#606008', 1) // (颜色,强度)

// 点光源(特点:类似灯泡,照射所有方向)
const point = new THREE.PointLight()

// 聚光灯(特点:类似手电筒,有光源和角度)
const spot = new THREE.SpotLight()

// 平行光(特点:类似太阳,所有光源都是平行的,有个统一方向)
const direction = new THREE.DirectionalLight()

// 半球光源(特点:因为光照情况复杂又叫自然光,模拟户外光线)
const hemisphere = new THREE.HemisphereLight()

// 镜头光晕
const lens = new Lensflare() // (纹理图片,光晕大小,光源,光源颜色)

二、材质

1.材质概述

(1)材质分类

• 点材质

• 线材质

• 网格材质

• 精灵材质

• 自定义着色器材质

(2)纹理映射

• 贴图               为物体添加颜色和细节。

• 法线贴图           在不增加几何体细节的情况下，增强物体表面的凹凸感。

• 环境光遮蔽贴图     增加物体表面的阴影效果，增强真实感。

• 位移贴图           根据纹理信息改变物体表面的几何细节。

2.实例

// 点材质
const points = new THREE.PointsMaterial()

// 线材质
const line_basic = new THREE.LineBasicMaterial() // 线基础材质
const line_dashe = new THREE.LineDashedMaterial() // 虚线材质

// 网格材质
const mesh_basic = new THREE.MeshBasicMaterial() // 网格基础材质
const mesh_lambert = new THREE.MeshLambertMaterial() // lambet材质 (漫反射)
const mesh_phong = new THREE.MeshPhongMaterial() // phong材质 (镜面反射，高光材质)
const mesh_standar = new THREE.MeshStandardMaterial() // PBR材质 PBR材质就是指物理材质
const mesh_physica = new THREE.MeshPhysicalMaterial() // PBR材质 PBR材质要比MeshPhongMaterial效果要好
const mesh_depth = new THREE.MeshDepthMaterial() // 网格深度材质
const mesh_normal = new THREE.MeshNormalMaterial() // 网格法向量材质

// 精灵材质
const sprite = new THREE.SpriteMaterial()

// 自定义着色器材质
const raw_shader = new THREE.RawShaderMaterial()
const shader = new THREE.ShaderMaterial()

3.常用属性

/**
 * 材质主要属性：
 * color    材质漫反射颜色
 * opacity  透明度
 * transparent  材质是否透明
 * side     渲染方向
 * emissive 自发光颜色
 * specular 镜面反射颜色
 * shininess    材质的光泽度
 * wireframe    是否以线框模式渲染物体
 * roughness    材质表面的粗糙程度
 * metalness    材质表面的金属质感
 * refractionRatio  材质的折射程度
 * map      纹理贴图
 * alphaMap 透明贴图
 * bumpMap  凹凸贴图
 * normalMap 法线贴图
 * displacementMap  位移提贴图
 * emissiveMap  自发光贴图
 * roughnessMap 粗糙度贴图
 * metalnessMap 金属度贴图
 * envMap   环境贴图
 */