Threejs进阶之三:通过GUI修改gltf模型(摩托车)颜色

上一节我们对摩托车的场景进行了优化,添加了聚光灯及阴影等效果,这一节我们继续对摩托车场景进行优化,我们通过GUI来控制摩托车各个部位颜色的修改
先看下修改后的最终效果
Threejs进阶之三:通过GUI修改gltf模型(摩托车)颜色_第1张图片

引入GUI

在motor3d.js中通过import引入GUI插件

import {
    GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js' //引入GUI

motor03.gltf的组成

在对gltf模型进行修改之前,我们需要先了解下这个模型的组成,我们可以通过在控制台打印该模型的方式查看其文件结构,也可以在threejs官网通过editor功能查看。这里我们通过控制台打印发现该模型一共有8个Mesh组成,我们可以在里面找到哪个Mesh是车身,哪个或哪几个Mesh是车架,然后,我们通过获取这些Mesh来对其颜色进行修改。
Threejs进阶之三:通过GUI修改gltf模型(摩托车)颜色_第2张图片

创建车身材质

定义一个bodyMaterial变量,用于接收Threejs的材质对象,这里我们使用Threejs提供的物理网关材质MeshPhysicalMaterial,这个材质是基于物理渲染,也就是PBR技术,效果更加逼真,能模拟物体表面的漫反射、镜面反射效果;
先来了解下MeshPhysicalMaterial材质的一些属性
.metalness
金属度属性.metalness表示材质像金属的程度. 非金属材料,如木材或石材,使用0.0,金属使用1.0,中间没有(通常). 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观。如果还提供了粗糙度贴图.metalnessMap,则两个值都相乘
.roughness
粗糙度属性.roughness材质的粗糙程度. 0.0表示平滑的镜面反射,1.0表示完全漫反射. 默认 0.5. 如果还提供粗糙度贴图.roughnessMap,则两个值相乘
.clearcoat
表示clear coat层的强度,范围从0.0到1.0m,当需要在表面加一层薄薄的半透明材质的时候,可以使用与clear coat相关的属性,默认为0.0
.clearcoatRoughness
clear coat层的粗糙度,由0.0到1.0。 默认为0.0
.metalnessMap和.roughnessMap
金属度贴图.metalnessMap和粗糙度贴图.roughnessMap
金属度贴图.metalnessMap纹理的蓝色通道用于改变材料的金属度
粗糙度贴图.roughnessMap纹理的绿色通道用于改变材料的粗糙度
Clearcoat
Clearcoat: Clearcoat可以在不需要重新创建一个透明的面的情况下实现类似于车漆,碳纤,被水打湿的表面的材质需要在面上再增加一个透明的,具有一定反光特性的面。而且这个面说不定有一定的起伏与粗糙度等类似的效果
定义车身材质

// 车身材质
let bodyMaterial = new THREE.MeshPhysicalMaterial({
   
  color: "#6e2121",
  metalness: 1, 
  roughness: 0.5, 
  clearcoat: 1.0, 
  clearcoatRoughness: 0.03, //clear coat层的粗糙度,由0.0到1.0。 默认为0.0 

你可能感兴趣的:(ThreeJS,javascript,html5,前端,3d,贴图)