Three.js 基础纹理贴图


theme: smartblue

本文简介

带尬猴,我嗨德育处主任

尽管 Three.js 文档已经比较详细了,但对于刚接触 Three.js 的工友来说,最麻烦的还是不懂如何组合。Three.js 的功能实在太多了,初学者很容易被大量的新概念冲晕。

本文主要讲解入门 Three.js 必须接触的基础贴图功能。本文只讲解常用的属性,学会了常用的属性设置就知道如何查阅文档使用其他属性了~

基础贴图

基础贴图用到的是基础材质 THREE.MeshBasicMaterialTHREE.TextureLoader

THREE.MeshBasicMaterial 是一个不受光照影响的材质,它可以直接给物体设置颜色,也可以将图片贴到物体表面。

THREE.TextureLoaderTHREE 提供的一个纹理加载器,通过它可以加载一些素材纹理。

在开始之前,先把画布必须项创建好。画布必须项包括:场景、相机、渲染器。如果忘了的话可以查看 《『Three.js』起飞!》

01.gif

```html

```

除了创建场景、相机和渲染器之外,我还创建了辅助坐标系 AxesHelper 和轨道控制器 OrbitControls,方便观察。

加载纹理

要使用纹理,需要做以下几步:

  1. 创建一个物体,用来承载纹理
  2. 引入纹理加载器 THREE.TextureLoader,并加载纹理 (load() 方法)
  3. 将纹理添加给基础材质 THREE.MeshBasicMaterial

由于前面已经创建了基础的画布所需项,所以这里会省略这部分代码

02.gif

```js // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 创建立方体 const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshBasicMaterial({ map: chungeLoader // 纹理贴图 }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) ```

THREE.MeshBasicMaterialmap 属性可以设置纹理贴图。

正反面渲染

前面的例子我们创建的立方体,如果此时我们把图贴到平面上,默认情况下它只显示正面。

本例用到下面这张图片

chunge_flower.png

  1. 创建一个平面
  2. 贴图

03.gif

```html // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 创建一个圆形 const circleGeometry = new THREE.CircleGeometry(0.5, 32) const material = new THREE.MeshBasicMaterial({ map: chungeLoader // 贴图 }) const circle = new THREE.Mesh(circleGeometry, material) scene.add(circle) ```

如果此时希望正方面都有贴图效果,可以将 side 设置为 THREE.DoubleSide

side 的默认值是 THREE.FrontSide。其他选项有THREE.BackSide, THREE.DoubleSideTHREE.TwoPassDoubleSide

04.gif

```js // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 创建一个圆形 const circleGeometry = new THREE.CircleGeometry(0.5, 32) const material = new THREE.MeshBasicMaterial({ map: chungeLoader, // 贴图 side: THREE.DoubleSide // 正反面都贴图 }) const circle = new THREE.Mesh(circleGeometry, material) scene.add(circle) ```

纹理偏移

在加载完纹理之后,可以设置纹理的 offset 属性进行纹理偏移。

本例用到下面这张图片

chunge.png

05.png

```html // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 纹理偏移 chungeLoader.offset.set(0.1, -0.5)

// 创建一个圆形 const circleGeometry = new THREE.CircleGeometry(0.5, 32) const material = new THREE.MeshBasicMaterial({ map: chungeLoader, // 贴图 side: THREE.DoubleSide // 正反面都贴图 }) const circle = new THREE.Mesh(circleGeometry, material) scene.add(circle) ```

其中,以下代码等价于 chungeLoader.offset.set(0.1, -0.5)

js chungeLoader.offset.x = 0.1 chungeLoader.offset.y = -0.5

x轴方向是正数时,纹理向右偏移;负数则向左偏移。

y轴方向是正数时,纹理向下偏移;负数则向上偏移。

旋转纹理

加载完纹理后,可以通过修改 rotation 属性旋转纹理。

旋转纹理要注意以下几点:

  1. 通过 rotation 旋转纹理
  2. 旋转时,是以弧度为单位。角度转弧度比较直观的公式是:角度度数 * Math.PI / 180
  3. 通过 center 设置旋转中心点

如果不设置旋转中心点,默认是以左上角为中心点进行旋转。

06.png

```js // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 旋转贴图 chungeLoader.rotation = 45 * Math.PI / 180

// 创建一个圆形 const circleGeometry = new THREE.CircleGeometry(0.5, 32) const material = new THREE.MeshBasicMaterial({ map: chungeLoader, // 贴图 side: THREE.DoubleSide // 正反面都贴图 }) const circle = new THREE.Mesh(circleGeometry, material) scene.add(circle) ```

本例将贴图旋转了45度,如果希望以元素的中心点作为旋转中心点,可以将 center 设置成 (0.5, 0.5),此时x轴和y轴都是以元素的中心点作为旋转中心点了。

07.png

```js // 省略部分代码...

// 旋转贴图 chungeLoader.rotation = 45 * Math.PI / 180 // 设置旋转中心点 chungeLoader.center.set(0.5, 0.5) ```

重复渲染

设置纹理的 repeat 属性可以控制重复渲染的次数。通过 wrapSwrapT 可以分别设置水平方向和垂直方向的的重复渲染模式。

wrapSwrapT 默认值是 THREE.ClampToEdgeWrapping,即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是 THREE.RepeatWrappingTHREE.MirroredRepeatWrapping

THREE.RepeatWrapping 是正常的重复,THREE.MirroredRepeatWrapping 是镜像重复。

接下来拿『春哥』练练手。

08.png

```js // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chunge_flower.png')

// 水平重复3次,垂直重复2次 chungeLoader.repeat.set(3, 2) chungeLoader.wrapS = THREE.RepeatWrapping // 水平重复 chungeLoader.wrapT = THREE.MirroredRepeatWrapping // 垂直镜像重复

// 创建立方体 const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshBasicMaterial({ map: chungeLoader // 纹理贴图 }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) ```

灰度纹理

如果你想把花背景隐藏掉,可以使用灰度纹理。

此时需要2张图。

chunge_flower.png

chunge_alpha.png

黑白这张图是一个蒙版层,和PS的图层蒙版是一个道理。

黑色表示要完全隐藏的部分,白色表示要完成显示的部分。如果用灰色,会根据灰色的深浅设置一个半透明的效果。

使用 alphaMap 可以设置灰度纹理层,同时还要将 transparent 设置为 true 才有效。

09.gif

```js // 省略部分代码...

// Three提供的纹理加载器 const textureLoader = new THREE.TextureLoader() // 导入纹理贴图基础贴图 const chungeLoader = textureLoader.load('./assets/images/chungeflower.png') // 导入蒙版贴图 const chungeAlphaTexture = textureLoader.load('./assets/images/chungealpha.png')

// 创建立方体 const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshBasicMaterial({ map: chungeLoader, // 纹理贴图 alphaMap: chungeAlphaTexture, // 设置透明纹理层 transparent: true // 允许材质透明 }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) ```

从上图可以看到,花背景已经被隐藏掉了。

如果此时将 side 设置成 THREE.DoubleSide 就可以双面展示了。

10.gif

代码仓库

基础纹理贴图

推荐阅读

👍《Three.js 起飞!》

👍《Three.js 辅助坐标轴》

👍《Three.js 场景 Scene》

👍《Three.js 几个简单的入门动画(新手篇)》

👍《Three.js 这样写就有阴影效果啦》

👍《Three.js 性能监视器 Stats》

微信图片_20230126072123.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值