Three.js 基础纹理贴图

最新推荐文章于 2024-07-16 09:50:03 发布
最新推荐文章于 2024-07-16 09:50:03 发布
阅读量365 收藏
点赞数
文章标签： javascript 贴图 数码相机 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39415598/article/details/129380289
版权

theme: smartblue

本文简介

带尬猴，我嗨德育处主任

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

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

基础贴图

基础贴图用到的是基础材质 THREE.MeshBasicMaterial 和 THREE.TextureLoader。

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

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

在开始之前，先把画布必须项创建好。画布必须项包括：场景、相机、渲染器。如果忘了的话可以查看 《『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.MeshBasicMaterial 的 map 属性可以设置纹理贴图。

正反面渲染

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

本例用到下面这张图片

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.DoubleSide 和 THREE.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 属性可以控制重复渲染的次数。通过 wrapS 和 wrapT 可以分别设置水平方向和垂直方向的的重复渲染模式。

wrapS 和 wrapT 默认值是 THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是 THREE.RepeatWrapping 和 THREE.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

德育处主任Pro
关注
Three.js---纹理贴图
TF_0806
09-17 1468
贴图分类API 纹理贴图 通过加载器TextureLoader的load方法加载一张图片返回一个纹理对象Texture，纹理对象Texture作为模型材质颜色贴图.map属性的值。 // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理 var textureLoader = new THREE.TextureLoader();
three.js 的纹理贴图
weixin_40583266的博客
12-28 1407
上一节讲过了几种光照模型下的材质还有就是透明效果，这节讲最常用的纹理材质。这节的程序主要是给箱子帖纹理图片，纹理贴图如下图所示，将图片贴到网格上，左边的网格是四边形的，是三维空间的一个四边形，每个顶点都是有坐标的，还通过纹理坐标也叫uv坐标来对应，前几节讲BuffeGeometry的时候提到过一个顶点一个 uv坐标。左图（0，1），（1，1），（0，0），（1，0）就是这个网格的纹理坐标，表明贴右边的图片的哪个地方，这是刚好把右图贴到左边的网格上。虚线表示了映射关系。 这个箱子的信息用BoxBufferG
Three.js 纹理贴图 - 环境贴图 - 纹理贴图 - 透明贴图 - 高光贴图
好好学习天天向上
01-31 2905
描述几何体的顶点坐标描述纹理贴图的坐标位置关系是一一对应的，每一个顶点位置对应一个纹理贴图的位置根据纹理坐标将纹理贴图的对应位置裁剪映射到几何体的表面上。0, 0, 0, //顶点1坐标100, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标]);0, 0, //顶点1对应位置的纹理坐标uv1, 0, //顶点2对应位置的纹理坐标uv0, 1, //顶点3对应位置的纹理坐标uv]);
Three.js创建纹理贴图（TextureLoader、.map）
热门推荐
u014291990的博客
12-04 1万+
创建纹理贴图 本文是Three.js电子书的8.1节 通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要在设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色...
Three.js纹理贴图
qq_45487080的博客
05-06 1094
/ texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图，镜像重复。// texture.wrapT = THREE.RepeatWrapping // 垂直贴图，纹理重复到无穷大。// texture.minFilter = THREE.NearestFilter // 取最接近的。// texture.rotation = Math.PI / 4 // 旋转45°。// texture.offset.x = 0.5 // 向左偏移，负为反。
threejs-纹理贴图
qq_37987033的博客
09-03 4966
threejs中的纹理贴图效果详述
three.js 使用纹理贴图 将图片覆盖物体表面
w__qwwq的博客
09-06 1218
three.js 使用纹理贴图 将图片覆盖物体表面
three.js 使用纹理贴图和精灵模型--模拟下雨
w__qwwq的博客
09-06 572
three.js 使用纹理贴图和精灵模型--模拟下雨场景
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
使用three.js 的 交互式 3D 心脏模型
07-14
在本项目中，我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库，它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL，three.js...
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
three.js 纹理贴图的使用
前端菜菜DayDayUp的博客
03-06 5234
three.js 纹理贴图的使用
ThreeJS文字作为纹理贴图
weixin_30530523的博客
10-13 653
文字作为纹理贴图 From:http://www.linhongxu.com/post/view?id=222 这里可以使用canvas作为纹理贴图，Three为我们提供里CanvasTexture function getTextCanvas(text){ var width=512, height=256; var canvas = document.createElem...
three.js 贴图
Coder----Allen----Coder
04-25 1124
map_bump dmentia_bluebird.jpg         map_Kd dmentia_bluebird.jpg map_bump dmentia_bluebird.jpg map_refl dmentia_bluebird.jpg mtl文件用记事本打开，输入以上文字。
Three.js学习8：基础贴图
九天翔龙的技术博客
02-08 2511
贴图，就是把图片贴在 3D 物体材质的表面，让它具有一定的纹理，来为 3D 物体添加细节的一种方法。这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。
ThreeJS-纹理贴图大集合
Define_best的博客
07-20 1134
纹理用来表现物体的细节。理论上可以将物体的每个细节通过建模展示出来，但是这样时间成本和性能成本都太高，因此，将物体的一些细节用纹理来表示。
【threeJS】纹理贴图
liuzhicheng1845的博客
08-20 1630
加载纹理贴图 new THREE.TextureLoader().load( "w.jpg", texture =>{ texture.wrapS =THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; mesh.material = new THREE.MeshBasicMaterial({map: texture}); } ); 将视频作为纹理贴图 var v
Three.js常见的贴图类型及其用途
最新发布
weixin_42776027的博客
07-16 734
每种贴图都有其独特的作用，通过合理组合和使用这些贴图，可以极大地提升3D模型的视觉质量和真实感。这种贴图可以是立方体贴图（Cubemap）或球面环境贴图（Spherical Environment Map），用于捕捉全景环境，使物体表面能够反映出周围环境的细节。位移贴图是最具真实感的贴图类型之一，它实际上会改变模型表面的几何形状，根据贴图中的数据来移动顶点位置，从而创建真实的物理凹凸效果。除了之前提到的贴图类型，Three.js还支持一些其他类型的贴图，用于更高级的视觉效果和物理模拟。
three.js水星纹理贴图
11-03
Three.js中实现水星纹理贴图的步骤如下： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建水星球体 var geometry = new THREE.SphereGeometry(1, 32, 32); var texture = new THREE.TextureLoader().load('mercury.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture }); var mercury = new THREE.Mesh(geometry, material); scene.add(mercury); // 渲染场景 function animate() { requestAnimationFrame(animate); mercury.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 其中，`THREE.TextureLoader().load('mercury.jpg')`用于加载水星的纹理贴图，`THREE.MeshBasicMaterial({ map: texture })`用于将纹理贴图应用到水星球体上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值