three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader
1、纹理贴图
纹理贴图，是给MeshLambertMaterial等材质一些纹理图片，以达到更好的视觉效果。
使用方法：通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。
const geometry = new THREE.PlaneGeometry(200, 100);
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./earth.jpg');
const material = new THREE.MeshLambertMaterial({
// color: 0x00ffff,color和map颜色值会混合，因此设置map后color一般不用设置
// 设置纹理贴图：Texture对象作为材质map属性的属性值
map: texture,//map表示材质的颜色贴图属性
});
color和map颜色值会混合，因此设置map后color一般不用设置
2、顶点uv坐标
顶点uv坐标，是二维顶点坐标，顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的。
作用：纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。
顶点UV坐标，可以在0~1.0之间任意取值(是百分比值，比如0.3，对应是30%的位置)，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。
/**纹理坐标0~1之间随意定义*/
const uvs = new Float32Array([
0, 0, //图片左下角
1, 0, //图片右下角
1, 1, //图片右上角
0, 1, //图片左上角
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标
获取纹理贴图左下角四分之一部分：
const uvs = new Float32Array([
0, 0,
0.5, 0,
0.5, 0.5,
0, 0.5,
]);
3、实现瓷砖地面效果
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./瓷砖.jpg');
// 设置阵列包裹模式，S对应U，T对应V
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(12,12);//注意选择合适的阵列数量
4、背景透明的png图片贴图-transparent
如果不做处理，直接贴图，透明部分会有颜色填充，因此要设置transparent: true解决
const material = new THREE.MeshBasicMaterial({
map: textureLoader.load('./指南针.png'),
transparent: true, //使用背景透明的png贴图，注意开启透明计算
});
5、创建uv动画(利用offset属性)
通过纹理对象的偏移属性.offset实现一个UV动画效果。offset是Vector2对象。
texture.offset.x +=0.5;//纹理U方向偏移
// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)
texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移 texture.offset.y +=0.5;//纹理V方向偏移
// 设置.wrapT也就是V方向，纹理映射模式
texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移
把上面代码放到渲染循环函数中执行即可实现动画。
记住对应关系：X：S：U这3个对应，Y：T：V这3个对应。
下面展示一个示例：
实例完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js中文网：www.webgl3d.cn</title>
<style>
body{
overflow: hidden;
margin: 0px;
}
</style>
</head>
<body>
<!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js",
"three/addons/": "../../../three.js/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 一个矩形平面几何体用来表示传送带
const geometry = new THREE.PlaneGeometry(200, 20);
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./纹理3.jpg'); const material = new THREE.MeshLambertMaterial({
map: texture,//map表示材质的颜色贴图属性
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(-Math.PI/2); // 设置阵列
texture.wrapS = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.x=50;//注意选择合适的阵列数量 //场景
const scene = new THREE.Scene();
scene.add(mesh); //模型对象添加到场景中 //辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper); //光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient); //渲染器和相机
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement); // 渲染循环
function render() {
texture.offset.x +=0.1;//设置纹理动画
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render(); const controls = new OrbitControls(camera, renderer.domElement); // 画布跟随窗口变化
window.onresize = function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
</script>
</body> </html>
文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/
three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader的更多相关文章
- WebGL three.js学习笔记 自定义顶点建立几何体
自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...
- svg.js教程及使用手册详解（二）
上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...
- unity中mesh属性的uv坐标讨论
http://blog.sina.com.cn/s/blog_427cf00b0102vp0j.html 之前在做连连看游戏中,也用到贴图坐标,当时我们讲到,不管是平铺(Tiling)还是偏移(Off ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- Node.js 教程 04 - 模块系统
前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...
- Node.js教程系列~目录
Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger
Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
随机推荐
- 使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频（未完待续）
使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频 1. 背景 最近项目上有个需求,需要实现:录音.回放录音.实现音频可视化效果.上传wav格 ...
- 12 JavaScript 关于eval函数
12 eval函数 eval本身在js里面正常情况下使用的并不多. 但是很多网站会利用eval的特性来完成反爬操作. 我们来看看eval是个什么鬼? 从功能上讲, eval非常简单. 它和python ...
- FindBugs问题EQ_COMPARETO_USE_OBJECT_EQUALS的解决方法
本文记录的是2016年4月初发生的事情. 前几天,标准CI的静态检查页面发现一个项目组同事引入的FindBugs问题,EQ_COMPARETO_USE_OBJECT_EQUALS,CI对这个问题给出的 ...
- Python 学习路线：介绍、基础语法、数据结构、算法、高级主题、框架及异步编程详解
Python 介绍 Python 是一种 高级 的.解释型 的.通用 的编程语言.其设计哲学强调代码的可读性,使用显著的缩进.Python 是 动态类型 和 垃圾收集 的. 基本语法 设置 Pytho ...
- 模型可解释之个体条件期望曲线(Individual Conditional Expectation)
ICE是模型可解释中,作为局部可解释的一个分支. 本质上就对每一个样本,通过改变某个特征取值而观测模型做出的预测变化的方式以解释模型.
- 深度优先搜索-overview
深度优先搜索的实现一般有2种方式 递归 //todo 非递归-借助stack 因为栈后进先出的特点,使其很容易实现树/图的深度优先遍历.如果是BFS,那非递归经常借助queue. 整个过程可以被描述为 ...
- 行业软件开发商怎样来抢 BI 这块蛋糕？
随着企业信息化建设的深入,很多机构的生产系统已建设完成,在保证生产的有序进行后,如何更有效地进行经营决策成了管理者面临的最大任务.商业智能(BI)就是在这种背景成为支撑企业经营分析的一大利器. 根据 ...
- c# assembly.GetManifestResourceStream找不到路径
前言 最近发现一个问题,用assembly.GetManifestResourceStream去找资源路径xml的时候,发现找不到,然后有些xml资源又可以找到,这时候有两种思维来思考. 正文 第一种 ...
- lowdb 在electron 使用中注意的问题
前言 可能很多人都没有听说过这个lowdb,但是它的确存在,而且在electron 中用到还是挺多的. 如何在electron 的render 进程中是引用electron 模块. 我们知道一个问题, ...
- 体验下，大厂在使用功能的API网关！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥. 还是在22年的时候,小傅哥做了一套基于 Netty 协议转换和 ...