Three.js贴图加载与环境遮蔽贴图强度设置(五)

在Three.js中,贴图加载与环境遮蔽贴图强度设置是创建逼真3D视觉效果的关键步骤。通过利用Three.js的TextureLoader,开发者可以轻松加载各种纹理贴图,如颜色贴图、透明度贴图以及环境遮蔽(Ambient Occlusion, AO)贴图,从而增强模型的细节和真实感。环境遮蔽贴图特别重要,因为它能够模拟物体表面因光照不足而产生的阴影效果,进而提升场景的深度和立体感。

在加载贴图后,调整环境遮蔽贴图的强度是一个至关重要的环节。这一设置允许开发者根据场景需求,精细调控AO贴图对最终渲染效果的影响程度。通过合理设置AO贴图的强度,可以在不增加额外光照计算负担的前提下,显著提升3D模型的视觉质量。本篇文章中主要讲述如何实现贴图加载及环境遮蔽贴图强度设置功能,同时提前说明在开始实现该功能之前,需要具备创建场景知识,具体内容请详看:Three.js+Vue3+Vite创建第一个场景(一)

一、贴图要素

在操作之前我们先来了解下需要使用到的一些基本要素

|---------------|-------------------------------------|
| PlaneGeometry | 平面缓冲几何体,一个用于生成平面几何体的类 |
| TextureLoader | 加载texture的一个类。 内部使用ImageLoader来加载文件 |
| load | 加载纹理文件 |

二、实现贴图

1.创建平面缓冲几何体

复制代码
//创建一个平面缓冲几何体
  const planeGeometry = new THREE.PlaneGeometry(1, 1)

2.创建平面材质

复制代码
//创建平面材质
  const planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff})

3.创建平面网格

复制代码
//创建平面网格
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)
//添加平面网格到场景中
  scene.add(plane)

添加完以上代码后我们可以在界面中看到一个白色的平面几何体

4.创建纹理加载器

接下来才是实现贴图的关键

复制代码
//创建纹理加载器
  const textureLoader = new THREE.TextureLoader()

5.加载纹理

复制代码
//加载纹理--这里我随便添加了一个图片
  const texture = textureLoader.load('./public/textures/blue-img.jpg')

6.设置纹理贴图

我们在刚刚穿件的材质中设置纹理贴图,

复制代码
const planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    //设置纹理贴图
    map: texture,
    //允许透明度
    transparent: true
  })

7.加载ao贴图

在上述的基础上,我们继续添加环境贴图,即使用aoMap属性,

复制代码
//加载ao贴图--也是随便使用的一张图片
  const aoMap = textureLoader.load('./public/textures/sprites/ball.png')

8.设置ao贴图

复制代码
  const planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    //设置纹理贴图
    map: texture,
    //允许透明度
    transparent: true,
    //设置ao贴图
    aoMap: aoMap
  })

9.添加gui控制器

由于上述添加的ao贴图在界面中显示的不是和明显,所以这里添加了GUI

复制代码
//创建gui
  const gui = new GUI()
//添加aoMapIntensity属性
  gui.add(planeMaterial, 'aoMapIntensity').min(0).max(1).name('ao强度')
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js