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强度')
相关推荐
Jerry Lau4 分钟前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我1234533 分钟前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw033 分钟前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator35 分钟前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e36 分钟前
扣子Coze纯前端部署多Agents
前端
海天胜景38 分钟前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing1 小时前
前端面试常考题目详解
前端·javascript
Boilermaker19922 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子2 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10242 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js