探索三维世界【2】：Three.js 的 Texture 纹理

news/2024/11/17 3:40:40/

缤纷三维世界大揭秘：探索 Three.js 的 Texture 纹理

  • 1、Texture纹理
  • 2、TextureLoader 纹理加载器
    • 2.1、创建纹理加载器
    • 2.2、纹理属性设置
    • 2.3、设置纹理渲染
    • 2.4、打光
  • 3、完整代码与展示

1、Texture纹理

Texture 是 three.js 中的“纹理”概念。纹理是指将一张图像映射到 three.js 场景中的物体表面上的过程。通过 Texture，可以在 three.js 场景中应用各种图像效果，并让物体的表面看起来更真实。

Texture 主要有以下子类：

  • DataTexture：可以存储任意格式的数据。这对于高度自定义的定制场景非常有用。
  • CompressedTexture：可以压缩图像以减少显存占用。这对于需要使用大量图片的场景非常有用。
  • CubeTexture：可以在物体表面上实现立体效果，让场景更加真实。
  • VideoTexture：可以将视频应用于场景中的物体表面上。
  • Texture 类的属性和方法，可以在 three.js 中实现各种纹理效果。例如，可以使用 Texture.repeat 和 Texture.wrapS 等属性来控制纹理的重复和环绕方式，使用 Texture.offset 来控制纹理的偏移量，使用 Texture.minFilter 和 Texture.magFilter 来控制纹理的缩放方式等等。

2、TextureLoader 纹理加载器

那么好，上面说明了Texture纹理，那么TextureLoader 纹理加载器就顾名思义是指加载纹理的对象咯。

TextureLoader 是 three.js 内置的一个类，用于加载纹理文件并创建 Texture 对象。你可以使用 TextureLoader 加载网页中的图像，然后在场景中创建一个新的纹理对象，并将其应用到任何需要的物体表面上。在加载过程中，实际上是使用 Texture 和其子类来创建不同类型的纹理对象。例如，TextureLoader 可以加载普通的图片来创建基本的 Texture 对象，或者加载 .dds 文件来创建压缩的 CompressedTexture 对象。

因此，TextureLoader 和 Texture 以及其子类之间是一种解耦的关系，TextureLoader 负责纹理的加载和创建工作，而 Texture 及其子类则负责实现具体的纹理效果和属性。

2.1、创建纹理加载器

在进行创建纹理加载器时，直接通过THREE父类进行创建，之后通过load方法进行加载图片到对应的纹理对象上。并且这里我们也并不关心图片何时加载上去，以及加载成功或失败的问题，后面三个回调函数就不必通过函数进行传递

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : Texture

  • url — 文件的URL或者路径，也可以为 Data URI.
  • onLoad — 加载完成时将调用。回调参数为将要加载的texture.
  • onProgress — 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
  • onError — 在加载错误时被调用。
import TREE from './assets/img/tree.png'
import SHIP from './assets/img/ship.png'const textureLoader = new THREE.TextureLoader()
const treeloader = textureLoader.load(TREE)
const shiploader = textureLoader.load(SHIP)

2.2、纹理属性设置

  • .offset : 贴图单次重复中的起始偏移量，分别表示U和V。 一般范围是由0.0到1.0
  • .center : 旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。
  • .rotation : 纹理将围绕中心点旋转多少度，单位为弧度（rad）。正值为逆时针方向旋转，默认值为0。
  • .repeat：决定纹理在表面的重复次数，两个方向分别表示U和V，如果重复次数在任何方向上设置了超过1的数值， 对应的Wrap需要设置为THREE.RepeatWrapping或者THREE.MirroredRepeatWrapping来 达到想要的平铺效果。
  • .wrapS : 这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。
    • 使用RepeatWrapping，纹理将简单地重复到无穷大。
    • 使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像。
  • .wrapT : 这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。同上wrapS
// 偏移
// treeloader.offset.x = 0.5
// treeloader.offset.y = 0.5
treeloader.offset.set(0.5, 0.5)
// 设置中心点和旋转角度
treeloader.center.set(0.5, 0.5)
// treeloader.rotation = Math.PI / 4
// 设置重复展示 需要设置包裹模式wrapS、wrapT
treeloader.wrapS = THREE.RepeatWrapping
treeloader.wrapT = THREE.RepeatWrapping
treeloader.repeat.set(2, 4)// shiploader.offset.set(0.5, 0.5)
shiploader.center.set(0.5, 0.5)
// shiploader.wrapS = THREE.RepeatWrapping
// shiploader.wrapT = THREE.RepeatWrapping
// shiploader.repeat.set(2, 4)
// 纹理显示    低像素展示
shiploader.minFilter = THREE.NearestFilter
shiploader.magFilter = THREE.NearestFilter

2.3、设置纹理渲染

在前面一章当中（探索三维世界：从Hello World开始的Three.js入门之旅）已经简单说明了如何创建一个简单的立体物体与材质，我们只需要给MeshBasicMaterial或者其他的材质设置上纹理也就完成了纹理贴图。

先看上一篇设置的MeshBasicMaterial基础网格材质，只给其设置了颜色

const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

这里我们可以通过alphaMap与map进行设置纹理

  • .alphaMap : Texture纹理类型 alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。
  • .map : Texture纹理类型 颜色贴图。
  • .transparent : 定义此材质是否透明。
const material = new THREE.MeshBasicMaterial({color: 'yellow',map: treeloader,alphaMap: treeloader,// transparent: true,// 渲染两面（外面、里面）side: THREE.DoubleSide// opacity: 0.5
});

2.4、打光

添加平行光

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-10, 10, 10)
scene.add(directionalLight);

3、完整代码与展示

在这里插入图片描述

import * as THREE from 'three'
import {OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import TREE from './assets/img/tree.png'
import SHIP from './assets/img/ship.png'
// 场景
const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);// 使用纹理
const textureLoader = new THREE.TextureLoader()
const treeloader = textureLoader.load(TREE)
const shiploader = textureLoader.load(SHIP)// 纹理属性
// 偏移
// treeloader.offset.x = 0.5
// treeloader.offset.y = 0.5
treeloader.offset.set(0.5, 0.5)
// 设置中心点和旋转角度
treeloader.center.set(0.5, 0.5)
// treeloader.rotation = Math.PI / 4
// 设置重复展示 需要设置包裹模式wrapS、wrapT
treeloader.wrapS = THREE.RepeatWrapping
treeloader.wrapT = THREE.RepeatWrapping
treeloader.repeat.set(2, 4)// shiploader.offset.set(0.5, 0.5)
shiploader.center.set(0.5, 0.5)
shiploader.wrapS = THREE.RepeatWrapping
shiploader.wrapT = THREE.RepeatWrapping
// shiploader.repeat.set(2, 4)
// 纹理显示    低像素展示
shiploader.minFilter = THREE.NearestFilter
shiploader.magFilter = THREE.NearestFilter// 几何体与材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 'yellow',map: treeloader,alphaMap: treeloader,// transparent: true,// 渲染两面（外面、里面）side: THREE.DoubleSide// opacity: 0.5
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);const planeGeometry = new THREE.PlaneGeometry(1, 1)
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1),material
)
plane.position.set(1, 0, 0)
// 第二套UV 环境渲染
planeGeometry.setAttribute("uv2",new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
)
scene.add(plane)// 标准网格材质
const mgeometry = new THREE.BoxGeometry(1, 1, 1);
const meshStandardMaterial = new THREE.MeshStandardMaterial({color: 0x00ff00,map: shiploader,alphaMap: shiploader,// 渲染两面（外面、里面）side: THREE.DoubleSide
});
const mCube = new THREE.Mesh(mgeometry, meshStandardMaterial);
mCube.position.set(4, 0, 0)
scene.add(mCube);// 加上灯光 环境光不能用来投射阴影，因为它没有方向。 入参 颜色的rgb数值  光照的强度
// const light = new THREE.AmbientLight('red', 0.5);
// scene.add(light);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 10, 10)
scene.add(directionalLight);// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 新增轨迹控制器
const controls = new OrbitControls(camera, renderer.domElement);// 使用渲染器   通过相机将场景渲染
function render(time) {renderer.render(scene, camera);requestAnimationFrame(render);
}render()

http://www.ppmy.cn/news/59170.html

相关文章

Addictive Multiplicative in NN

Addictive Multiplicative in NN

特征交叉是特征工程中的重要环节，在以表格型（或结构化）数据为输入的建模中起到了很关键的作用。 特征交互的作用，一是尽可能挖掘对目标有效的模式、特征，二是具有较好的可解释性，三是能够将对数据的洞见引…
阅读更多...
基于max30102的物联网病房监测系统（中断处理和主题逻辑）

基于max30102的物联网病房监测系统（中断处理和主题逻辑）

目录 五、中断处理 六、主体框架 对采集数据的初始化 核心功能的实现 烟雾 通信帧格式 wifi接收数据的处理 OLED显示 五、中断处理 void SysTick_Handler(void) {TimingDelay_Decrement(); }void ESP8266_USART_INT_FUN(void) {uint8_t ucCh;if ( USART_GetITStatus (…
阅读更多...
CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）

CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）

目录 1. 选择器的作用 2. 选择器的分类 3. 基本选择器 3.1 标签选择器 3.2 类选择器
阅读更多...
手写【深拷贝】

手写【深拷贝】

JS中深拷贝的实现 JSON.parse(JSON.stringify())递归实现深拷贝 使用JSON.parse(JSON.stringify()) 实现 无法拷贝 函数、正则、时间格式、原型上的属性和方法等 递归实现深拷贝 es5实现深拷贝 源对象 const obj {name: 张桑,age: 18,hobby: [{name: 篮球,year: 5,loveSta…
阅读更多...
Pinia入门-实现简单的用户状态管理

Pinia入门-实现简单的用户状态管理

目录 一：pinia 是什么 二：pinia与vuex的区别 三：pinia的基本使用 3.1.安装 3.2.创建一个 pinia 实例 四：Pinia中的Store 4.1.什么是store 4.2.什么时候使用store 4.3.store的基本使用 4.4.state 4.5.getters 4.6.acti…
阅读更多...
现代CMake高级教程 - 第 5 章：链接第三方库

现代CMake高级教程 - 第 5 章：链接第三方库

双笙子佯谬老师的【公开课】现代CMake高级教程课程笔记 第 5 章&#xff1a;链接第三方库 案例 使用 tbb 库 main.cpp #include <tbb/parallel_for.h> int main() {tbb::parallel_for(0, 4, [&] (int i){printf("hello, %d!\n", i);}) }直接链接 tbb …
阅读更多...
【JS笔记】JS常见的事件、事件传播、事件解绑、事件委托、阻止事件冒泡、阻止默认行为、正则表达式

【JS笔记】JS常见的事件、事件传播、事件解绑、事件委托、阻止事件冒泡、阻止默认行为、正则表达式

目录 一、JS事件 1.1、事件介绍 1.2、绑定和解绑事件 （1）绑定事件 （2）解绑事件
阅读更多...
【Vue.js】1668- 初中级前端必须掌握的 10 个 Vue 优化技巧

【Vue.js】1668- 初中级前端必须掌握的 10 个 Vue 优化技巧

优化 Vue.js 应用性能是每个前端开发人员都需要关注的问题。本文我将分享 10 个初中级前端必须掌握的 Vue.js 优化技巧&#xff0c;无论您是正在学习 Vue.js&#xff0c;还是已经在应用开发中使用它&#xff0c;希望这些技巧都会对你的工作有所帮助。 1. 优雅的设置 v-for 中的…
阅读更多...
最新文章

Copyright @ 2022~2023