当前位置：首页 > news >正文

three.js 入门三：buffergeometry贴图属性（position、index和uvs）

news 2026/5/16 7:58:09

环境：

three.js 0.159.0

一、基础知识

geometry：决定物体的几何形状、轮廓；
material：决定物体呈现的色彩、光影特性、贴图皮肤；
mesh：场景中的物体，由geometry和materia组成；
texture：贴图，用于将一个jpg等格式的图片贴到material上面（当然，material也可以不贴texture）；

另外，如果material上是定义的color，那么说明，物体是自发光的，不需要灯光就能看到，
而materia如果整个是靠texture贴上去的，则需要光照才能看到它，最简单的是用环境光。

另外，对于一张图片，无论它有多大或多小，左下角是(0,0),右上角是(1,1)，这就是uv，宽用u表示，高用v表示。

另外，无论一个物体形状有多复杂，其表面也可以分割成很多三角面。

下面使用的示例图片如下：

二、简单实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}</style><script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.159.0/build/three.module.js","three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"}}</script>
</head><body><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let camera, scene, renderer;//基础对象camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(50, 50, 50);camera.updateProjectionMatrix();renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const controls = new OrbitControls(camera, renderer.domElement);controls.minDistance = 5;controls.maxDistance = 300;controls.update()scene = new THREE.Scene();// 环境光const light = new THREE.AmbientLight(0x404040); // soft white lightscene.add(light);//坐标轴const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);//准备geometry//点位var position = [10, 10, 0,10, 0, 0,0, 0, 0]//贴图var uvs = [1, 1,1, 0,0, 0,]        //构造geometrylet geometry = new THREE.BufferGeometry();geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3));geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));//加载贴图const texture = new THREE.TextureLoader().load('number.png');texture.wrapS = texture.wrapT = THREE.RepeatWrapping;texture.repeat.set(1, 1);//准备materialconst material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide,map: texture,transparent: true,opacity: 0.7,});//组成meshconst mesh = new THREE.Mesh(geometry, material);scene.add(mesh);function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);}animate();</script>
</body></html>

效果如下：
在这里插入图片描述

三、探索贴图原理

先说上面示例：

position 表达了三个点位的坐标和顺序（看向-z轴，逆时针），此时面的法方向是 (0,0,-1)；
uv 表达了position每个点位在贴图上的点；
又因为，将material设为了透明和双面渲染，所以我们看向-z轴也是可以看到效果的（我们默认看到的效果其实是背面，可以将上面的 side: THREE.DoubleSide, 注释掉试试）；

这里是否有一个疑问：怎么知道贴图的正面是朝向哪的呢？为什么这里是朝向+z轴，而不是-z轴呢？

其实，因为position和uv，webgl的插值计算只能将贴图的正面朝向+z轴，如下图示意：

四、考虑index作用

上面只是3个点位，所以仅用position和uv即可表达，但如果有很多点位，再这么写的话position会很多，而且很多都是重复的，
比如：立方体有8个点位，如果每个面分成两个三角面，那么总共需要24 = 6*2*3个点位坐标（每个3角面要3个点）。

此时使用index的写法：
position：8个点位
index: 列出每个三角面的点位序号, 共计 24 个元素
uv：和position一一对应

将上面示例中geometry部分改造如下：

//准备geometry
//点位
var position = [10, 10, 0,10, 0, 0,0, 0, 0,0, 10, 0,
]
//贴图
var uvs = [1, 1,1, 0,0, 0,0, 1,
]
//点位序号
var index = [0, 1, 2,0, 2, 3,
]        
//构造geometry
let geometry = new THREE.BufferGeometry();
geometry.setIndex(index);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

此时，我们看到的效果：
在这里插入图片描述

可以看到，我们仅用了4个点位，便描述了两个3角面。

五、看一个特殊的示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}</style><script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.159.0/build/three.module.js","three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"}}</script>
</head><body><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let camera, scene, renderer;//基础对象camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(50, 50, 50);camera.updateProjectionMatrix();renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const controls = new OrbitControls(camera, renderer.domElement);controls.minDistance = 5;controls.maxDistance = 300;controls.update()scene = new THREE.Scene();// 环境光const light = new THREE.AmbientLight(0x404040); // soft white lightscene.add(light);//坐标轴const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);//准备geometry//点位var position = [10, 10, 0,10, 0, 0,0, 0, 0,]//贴图var uvs = [0, 1,1, 1,0, 0,]//点位序号var index = [0, 1, 2]//构造geometrylet geometry = new THREE.BufferGeometry();geometry.setIndex(index);geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3));geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));//加载贴图const texture = new THREE.TextureLoader().load('number.png');texture.wrapS = texture.wrapT = THREE.RepeatWrapping;texture.repeat.set(1, 1);//准备materialconst material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide,map: texture,transparent: true,opacity: 0.7,});//组成meshconst mesh = new THREE.Mesh(geometry, material);scene.add(mesh);function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);}animate();</script>
</body></html>

效果如下：
在这里插入图片描述

六、最后看一个用立方体实现全景图预览的效果

效果图如下：
在这里插入图片描述

代码下载请看博文顶部。。。

three.js 入门三：buffergeometry贴图属性（position、index和uvs）

一、基础知识

二、简单实例

三、探索贴图原理

四、考虑index作用

五、看一个特殊的示例

六、最后看一个用立方体实现全景图预览的效果

相关文章：

three.js 入门三：buffergeometry贴图属性（position、index和uvs）

Initial用法-FPGA入门3

perl脚本中使用eval函数执行可能有异常的操作

『Redis』在Docker中快速部署Redis并进行数据持久化挂载

ubuntu创建apt-mirror本地仓库

计算机网络 internet应用 (水

【ChatGLM3】第三代大语言模型多GPU部署指南

云原生Kubernetes系列 | Docker/Kubernetes的卷管理

Java实现快速排序算法

MAC配置环境变量

系列五、DQL

【智能家居】七、人脸识别翔云平台编程使用(编译openSSL支持libcurl的https访问、安装SSL依赖库openSSL)

基于node 安装express后端脚手架

Mrdoc知识文档

C语言中getchar函数

全栈开发组合

wpf TelerikUI使用DragDropManager

Python+Appium自动化测试之元素等待方法与重新封装元素定位方法

详解Maven如何打包SpringBoot工程

PyQt6 QFrame分割线控件

深入 Spring Boot Logback 集成：手把手教你自定义彩色日志模板，告别千篇一律的默认样式

GitHub仓库自动化同步工具xpull：原理、配置与实战应用

KISS原则在大模型时代的生死线：DeepSeek工程化落地中被忽略的4类隐性复杂度（附NASA级简洁度评分表）

从 LLM 到 Agent：Harness Engineering 的角色演变

DeepSeek在MMLU基准测试中狂揽86.7分：这3个被99%开发者忽略的推理优化技巧，立竿见影！

AI Agent工作流引擎：从DAG编排到生产级应用实践

Yii2开启URI伪静态的相关配置

思源宋体CN终极指南：7种字重免费商用中文字体快速上手完整教程

3大核心优势：QModMaster如何成为工业通信调试的必备利器

5分钟掌握网盘直链解析神器：彻底告别下载限速烦恼