Three.js 入门(基础材质、贴图、纹理、环境、遮蔽光、透明度、高光贴图)

本篇主要学习内容 :

  1. three常用的几种材质
  2. 环境贴图、贴图、
  3. 环境光、遮蔽光、透明度、高光贴图(纹理贴图)

点赞 + 关注 + 收藏 = 学会了

1.three常用的几种材质

1.1) 基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质他们都有一个共同的父类Material
1.2) MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法,比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等后面会学到我写了示例代码

2.环境贴图、贴图


2.1)环境贴图

如果你不设置任何光源和环境贴图,gltf模型默认PBR材质不会正常显示,一片漆黑。

不过你不设置任何光源,只设置环境贴图,物体表面也能看到。虽然环境贴图不是光源,但是会模拟物体周围环境的反射光。就好比你站在街上,周围房子、树木、马路也会反射光线到你身上。

通过.envMapIntensity可以调节环境贴图对模型外表面的影响程度,.envMapIntensity的值可以通过gui交互界面调节。

js 复制代码
// 导入加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 实例化rgbeLoader
let rgbeLoader = new RGBELoader()
// 环境贴图
rgbeLoader.load('./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
    // 设置球形映射
    envMap.mapping = THREE.EquirectangularReflectionMapping
    // 设置环境贴图
    scene.background = envMap
    // 场景设置环境贴图
    scene.environment = envMap
    // 设置plane环境贴图
    planeMaterial.envMap = envMap
})

3.环境光、遮蔽光、透明度、高光贴图 (纹理贴图)

3.1) 纹理贴图

通过纹理贴图加载器TextureLoaderload()方法加载一张图片可以返回一个纹理对象Texture

通过设置纹理贴图各个参数来实现控制以上效果,往下继续学习吧

3.2)纹理对象Texture可以作为模型材质颜色贴图.map属性的值。
js 复制代码
// 创建纹理加载器
let textureLoader = new THREE.TextureLoader()
// 加载纹理  基础纹理贴图 .map设置
let texture = textureLoader.load('./texture/watercover/CityNewYork002_COL_VAR1_1K.png')
3.3) 环境光

一般三维场景需要添加环境光,来整体调节三维场景的明暗,环境光强度可以通过参数2,或光照强度属性.intensity设置。

实际开发,可以先给一个大概的值,然后通过gui交互界面微调AmbientLight的光照强度属性.intensity

复制代码
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);
3.3) 遮蔽光、遮蔽贴图、ao贴图
js 复制代码
// 加载ao贴图 环境遮挡贴图
let aoMap = textureLoader.load('./texture/watercover/CityNewYork002_AO_1K.jpg')
3.4)透明度贴图
js 复制代码
// 透明度贴图 灰度
let alphaMap = textureLoader.load('./texture/door/height.jpg')
3.3)高光
js 复制代码
// 光照贴图
let lightMap = textureLoader.load('./texture/colors.png')
// 高光贴图
let specularMap = textureLoader.load('./texture/watercover/CityNewYork002_GLOSS_1K.jpg')

对应添加至材质的属性即可(这里需要文件的可以私我)

js 复制代码
// 创建材质
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    // 贴图
    map: texture,
    // 允许透明
    transparent: true,
    //ao贴图 环境遮挡贴图
    aoMap: aoMap,
    aoMapIntensity: 1, //强度默认1
    // 透明度贴图
    // alphaMap: alphaMap,
    // 光照贴图
    // lightMap: lightMap,
    // 高光贴图
    specularMap: specularMap,
    // 反射强度
    reflectivity: 0.5,
})

通过gui我们还可以调试(回顾上节)
gui.add(planeMaterial, 'aoMapIntensity').min(0).max(1).name('ao强度环境遮挡贴图')
gui.add(planeMaterial, 'reflectivity').min(0).max(1).name('反射强度')
相关推荐
Billy Qin20 分钟前
Rollup详解
前端·javascript·rollup
前端小菜鸟一枚s40 分钟前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium
JohnsonXin40 分钟前
怎么使用vue3实现一个优雅的不定高虚拟列表
前端·javascript·css·html5
东望41 分钟前
写代码不规范,同事两行泪 😭(工程化如何让团队协作更高效)
javascript·前端工程化
用户8377014088141 分钟前
前端实现个人信息脱敏(手机号、身份证号、姓名、邮箱)JavaScript代码示例
javascript
前端小菜鸟一枚s1 小时前
`ConstantProperty` 的使用与应用
前端·javascript·cesium
Neverthe1ess1 小时前
创新项目实训开发日志1
前端·javascript·vue.js·vue
阿里云云原生1 小时前
如何使用通义灵码学习JavaScript和DOM
前端·javascript
疯狂平头哥1 小时前
canvas签字+html2canvas将dom保存为图片避坑指南
前端·javascript
华洛1 小时前
千问7B模型完胜deepseek V3,全靠我一手微调!
前端·javascript·程序员