深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。

本文的在线演示结果和代码请点击这里:Three.js贴图实例。

什么是贴图(Texture Mapping)

贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。

这使我们能够添加表面细节,而无需将这些细节建模到我们的3D对象中,从而大大精简3D模型的多边形边数,提高模型渲染性能。

开始吧

这里方便起见,我们使用踏得网在线开发工具来一步步边学边操作。

请点击新建作品,在第三方库中选择Three.js 80版本,这将自动加载对应版本的Three.js开发库(注:你也可以直接把<script src="http://wow.techbrood.com/libs/three.r73.js"></script>拷贝到HTML代码面板中去)。

首先我们创建一个立方体,在JavaScript面板中编写代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var camera;
var scene;
var renderer;
var mesh;
  
init();
animate();
  
function init() {
  
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
  
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 1, 1 ).normalize();
    scene.add(light);
  
    var geometry = new THREE.CubeGeometry( 10, 10, 10);
    var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
  
    mesh = new THREE.Mesh(geometry, material );
    mesh.position.z = -50;
    scene.add( mesh );
  
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
  
    window.addEventListener( 'resize', onWindowResize, false );
  
    render();
}
  
function animate() {
    mesh.rotation.x += .04;
    mesh.rotation.y += .02;
  
    render();
    requestAnimationFrame( animate );
}
  
function render() {
    renderer.render( scene, camera );
}
  
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
    render();
}

点击菜单栏中的[运行]菜单(blob.png),或者按快捷键:CTRL+R,来运行该代码,你将看到一个旋转的蓝色立方体:

我们接下来要做的就是把这个立方体变成一个游戏里常见的木箱子,如下图所示:

为此我们需要一张箱子表面的图像,并用这张图像映射到立方体对象的材料中去,

这里我们直接使用在线图片http://wow.techbrood.com/uploads/1702/crate.jpg.

JS代码中修改之前的材料(material)创建代码:

1
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

为使用贴图:

1
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://wow.techbrood.com/uploads/1702/crate.jpg') } );

再运行下(按[运行]菜单或CTRL+R快捷键),你会看到一个旋转的板条箱,而不是一个普通的蓝色立方体。

在构造我们的材质时,我们指定了texture属性并将其值设置为木箱图像,Three.js然后会加载纹理图像并映射到立方体各个面上。

那么,问题是如果我们想给不同的面添加不同的纹理贴图,该怎么办呢?

一种方法是使用材料数组,我们创建6个新材料,每一个使用不同的纹理贴图:bricks.jpg,clouds.jpg,stone-wall.jpg,water.jpg,wood-floor.jpg以及上面的crate.jpg。

相应的,我们把材料构造代码修改为:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var material1 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/crate.jpg') } );
var material2 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/bricks.jpg') } );
var material3 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/clouds.jpg') } );
var material4 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/stone-wall.jpg') } );
var material5 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/water.jpg') } );
var material6 = new THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture('/uploads/1702/wood-floor.jpg') } );
var materials = [material1, material2, material3, material4, material5, material6];
var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

上述代码,我们先分别创建了6个材料,组成了一个材料数组,并使用这个数组创建一个MeshFaceMaterial对象。

最后,我们需要告诉我们的3D模型来使用这个新的组合“面材料”,修改下面的代码:

1
mesh = new THREE.Mesh(geometry, material );

为:

1
mesh = new THREE.Mesh(geometry,  meshFaceMaterial);

再运行下(按[运行]菜单或CTRL+R快捷键),你就将看到立方体的各个表面使用了不同的贴图。

这很酷,Three.js会自动把数组中的这些材料应用到不同的面上去。

但问题又来了,随着3D模型的面的增长,为每个面创建贴图是不现实的。

这就是为什么我们需要另外一种更为普遍的解决方法:UV映射的原因。

UV映射(UV Mapping)

UV映射最典型的例子就是把一张地图映射到3D球体的地球仪上去。其本质上就是把平面图像的不同区块映射到3D模型的不同面上去。我们把之前的6张图拼装成如下的一张图:http://wow.techbrood.com/uploads/160801/texture-atlas.jpg.

修改如下代码:

1
2
3
4
5
6
var material1 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg') } );
var material2 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/bricks.jpg') } );
var material3 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/clouds.jpg') } );
var material4 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/stone-wall.jpg') } );
var material5 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/water.jpg') } );
var material6 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/wood-floor.jpg') } );

为:

1
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/texture-atlas.jpg') } );

我们又把代码给改回来使用一张贴图了,接下来我们需要把贴图的不同位置映射到立方体不同的面上去。

首先我们创建贴图的6个子图,在创建完材料的代码后面添加如下几行:

1
2
3
4
5
6
var bricks = [new THREE.Vector2(0, .666), new THREE.Vector2(.5, .666), new THREE.Vector2(.5, 1), new THREE.Vector2(0, 1)];
var clouds = [new THREE.Vector2(.5, .666), new THREE.Vector2(1, .666), new THREE.Vector2(1, 1), new THREE.Vector2(.5, 1)];
var crate = [new THREE.Vector2(0, .333), new THREE.Vector2(.5, .333), new THREE.Vector2(.5, .666), new THREE.Vector2(0, .666)];
var stone = [new THREE.Vector2(.5, .333), new THREE.Vector2(1, .333), new THREE.Vector2(1, .666), new THREE.Vector2(.5, .666)];
var water = [new THREE.Vector2(0, 0), new THREE.Vector2(.5, 0), new THREE.Vector2(.5, .333), new THREE.Vector2(0, .333)];
var wood = [new THREE.Vector2(.5, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, .333), new THREE.Vector2(.5, .333)];

上面的代码创建了六个数组,每一个对应于纹理贴图中的每个子图像。每个数组包含4个点,定义子图像的边界。坐标的范围值是0到1,(0,0)表示左下角,(1,1)表示右上角。

子图像的坐标是根据贴图中百分比来定义。比如下面这个砖头子图像:

1
2
3
4
5
6
var bricks = [
new THREE.Vector2(0, .666),
new THREE.Vector2(.5, .666),
new THREE.Vector2(.5, 1),
new THREE.Vector2(0, 1)
];

在贴图中的位置在左上角(占据横向1/2,竖向1/3的位置),以逆时针方向来定义顶点坐标,从该子图像较低的左下角开始。

左下角:
0 - 最左边
.666 - 底部向上2/3处

右下角:
.5 - 中间线
.666 - 底部向上2/3处

右上角:
.5 - 中间线
1 - 顶边

右上角:
0 - 最左边
1 - 顶边

定义好子图像后,我们现在需要把它们映射到立方体的各个面上去。首先添加如下代码:

1
geometry.faceVertexUvs[0] = [];

上述代码清除现有的UV映射,接着我们添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];
  
geometry.faceVertexUvs[0][2] = [ clouds[0], clouds[1], clouds[3] ];
geometry.faceVertexUvs[0][3] = [ clouds[1], clouds[2], clouds[3] ];
  
geometry.faceVertexUvs[0][4] = [ crate[0], crate[1], crate[3] ];
geometry.faceVertexUvs[0][5] = [ crate[1], crate[2], crate[3] ];
  
geometry.faceVertexUvs[0][6] = [ stone[0], stone[1], stone[3] ];
geometry.faceVertexUvs[0][7] = [ stone[1], stone[2], stone[3] ];
  
geometry.faceVertexUvs[0][8] = [ water[0], water[1], water[3] ];
geometry.faceVertexUvs[0][9] = [ water[1], water[2], water[3] ];
  
geometry.faceVertexUvs[0][10] = [ wood[0], wood[1], wood[3] ];
geometry.faceVertexUvs[0][11] = [ wood[1], wood[2], wood[3] ];

geometry对象的faceVertexUvs属性包含该geometry各个面的坐标映射。既然我们映射到一个多维数据集,你可能会疑惑为什么数组中有12个面。原因是在ThreeJS模型中,立方体的每个面实际上是由2个三角形组成的。所以我们必须单独映射每个三角形。上述场景中,ThreeJS将为我们加载单一材料贴图,自动分拆成三角形并映射到每个面。

这里要注意每个面的顶点坐标的定义顺序必须遵循逆时针方向。为了映射底部三角形,我们需要使用的顶点指数0,1和3,而要映射顶部三角形,我们需要使用索引1,2,和顶点的3。

最后,我们替换如下代码:

1
2
var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh(geometry,  meshFaceMaterial);

为:

1
mesh = new THREE.Mesh(geometry,  material);

我们再运行下代码(按[运行]菜单或CTRL+R快捷键),将看到各个面使用不同贴图的旋转立方体。

当然对于复杂的对象,我们还可以在建模的时候建立好模型贴图,并导出为ThreeJS所支持的模型格式,然后在场景中直接加载。

这个超出本文范围,请自行搜索本站Three.js在线实例。

 

参考: http://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1/

编注:原文在线演示和源代码链接不可用,已重新建立在WOW上。

转载于:https://www.cnblogs.com/yanan-boke/p/7815018.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在兰州吃牛肉面时亲眼目睹的一幕,我感动了

今天中午去吃占国牛肉面&#xff0c;人比较多&#xff0c;很热闹。旁边坐了一群身穿校服的小学生&#xff0c;身后坐着一位小学老师&#xff0c;当孩子们发现老师在后面的时候&#xff0c;都异口同声地叫老师过去跟他们一起吃&#xff0c;老师嘿的一笑&#xff0c;没同意&#…

如何跨 Namespace 同步 Secret 和 ConfigMap?

Secret 和 ConfigMap 资源对象是命名空间级别的。它们只能被同一命名空间中的 Pod 引用。所以有时候不得不手动为每个命名空间创建它们。但有很多场景&#xff0c;我们想让它们是全局的&#xff0c;至少可以是跨命名空间共享的 Secret 和 ConfigMap&#xff0c;例如这些场景&am…

一文总结学习 Python 的 14 张思维导图

本文主要涵盖了 Python 编程的核心知识&#xff08;暂不包括标准库及第三方库&#xff0c;后续会发布相应专题的文章&#xff09;。 首先&#xff0c;按顺序依次展示了以下内容的一系列思维导图&#xff1a;基础知识&#xff0c;数据类型&#xff08;数字&#xff0c;字符串&am…

GEE学习笔记

掩膜 ​ 在遥感图像处理中&#xff0c;"掩膜"是指一种用于隐藏或保留图像特定部分的技术。掩膜通常是一个二进制图像&#xff0c;其中的像素值为0或1&#xff0c;分别表示遮蔽或保留。 ​ 在去除云的情境中&#xff0c;掩膜通常用于隐藏图像中被云覆盖的部分&#…

十一、飞机大战(IVX 快速开发教程)

十一、飞机大战 制作微信小游戏大致流程与微信小程序、Web类似&#xff0c;不同的在于是组件的使用。 文章目录十一、飞机大战11.1.1 完成游戏角色制作11.1.2 完成物理世界添加11.1.3 完成子弹对象反重力运动11.1.4 使用对象组创建子弹11.1.5 子弹优化11.1.6 设置敌机11.1.7 优…

中国版LinkedIn呼之欲出

迄今为止&#xff0c;发展势头强劲的Facebook仍未上市&#xff0c;而美国职业社交网站LinkedIn 却率先登录纽约证券交易所&#xff0c;股价在第一天的交易中飙升&#xff0c;从45美元的发行价上涨了一倍&#xff0c;然后超过100美元&#xff0c;最终以94.25美元收盘。 LinkedIn…

Android之实现RecyclerView拖拽效果和固定部分元素不进行交换位置(包含源代码下载地址)

1、效果爆照 启动的效果 拖动过程中的效果 拖动后的效果 2、需求和问题 需求:RecyclerView实现拖拽效果,但是部分固定位置不能进行拖拽也不能在拖拽的过程中交换顺序

各主流浏览器内核介绍

所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”&#xff0c;直译这个词汇叫做“渲染引擎”&#xff0c;不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容&#xff0c;将页面内 容和排版代码转换为用…

测绘地理信息标准(国家、行业、地方)大全来了:测绘地理信息标准化服务平台

测绘地理信息标准化服务平台&#xff0c;这里有你需要的所有标准&#xff0c;赶快来围观吧&#xff01;

WPF效果第一百八十七篇之再玩ListBox

大周末的接着上一篇又玩了ListBox,这不又来再次去玩耍ListBox;毕竟是我的最爱,没办法就喜欢玩耍他;闲话也不多扯了,直接看最终效果:2、ItemsPanel还是老样子:<ItemsPanelTemplate x:Key"CommonItemsPanelTemplate"><WrapPanel Orientation"Horizontal&…

利用pdf.js开发嵌入pdf显示,以及利用jquery-ui左右分栏显示

原来考虑用pdf.js的viewer.html页面&#xff0c;但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容&#xff0c;右侧显示其它相关内容&#xff0c;并且左右宽度可以任意拖动&#xff0c;最终实现效果如图&#xff1a; 代码&#xff1a;<!DOCTYPE html><ht…

十三、制作 iVX音乐分享小程序

功能介绍 通过前几节的学习&#xff0c;我们对完成一个应用已经有了一些自己的心得。在此再次再制作一个小的音乐小程序应用。该应用一共分为首页、榜单页、音乐分享页和音乐搜索页。 首页&#xff1a; 榜单内容页&#xff1a; 音乐分享页&#xff1a; 音乐搜索页&#xff1a…

01_反射_02_反射类的构造方法

【工程截图】 【Person.java】 //将要被反射的类 package com.Higgin.reflect; import java.util.List;public class Person {private String name"NULL";private int age0;public Person(){System.out.println("构造方法&#xff1a;Person()");}public P…

私有云搭建 OpenStack(centos7.3, centos-release-openstack-ocata)

OpenStack&#xff08;centos7.3,centos-release-openstack-ocata&#xff09;nova&#xff1a;计算节点queue&#xff1a;消息队列&#xff0c;系统瓶颈所在scheduler&#xff1a;调度机制conductor&#xff1a;更新数据库cert&#xff08;objectstore&#xff09;&#xff1a…

C# 类继承中的私有字段都去了哪里?

最近在看 C 类继承中的字段内存布局&#xff0c;我就很好奇 C# 中的继承链那些 private 字段都哪里去了? 在内存中是如何布局的&#xff0c;毕竟在子类中是无法访问的。一&#xff1a;举例说明 为了方便讲述&#xff0c;先上一个例子&#xff1a;internal class Program{stati…

大型分布式网站架构技术总结

本文是学习大型分布式网站架构的技术总结。对架构一个高性能&#xff0c;高可用&#xff0c;可伸缩&#xff0c;可扩展的分布式网站进行了概要性描述&#xff0c;并给出一个架构参考。一部分为读书笔记&#xff0c;一部分是个人经验总结。对大型分布式网站架构有很好的参考价值…

python 数据分析找到老外最喜欢的中国美食【完整代码】

一、环境及依赖 语言&#xff1a;python3.8 抓取&#xff1a;selenium 代理&#xff1a;ipide **注&#xff1a;**想要完整代码的在末尾&#xff0c;注意新手建议慢慢看完。在此提示一下本篇文章的编写步骤&#xff1a;1.获取数据、2.翻译、3.数据清洗、4.切词词权重、5.词云 …

hihoCoder 1257 Snake Carpet(很简单的构造方法)

2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑&#xff0c;每条蛇的输出是要从头到尾输出的。 还要注意的是&#xff0c;不能开数组去模拟构造过程&#xff0c;然后输出&#xff0c;那样会TLE的。 #include <cstdio> #include <cstring> #include <cmath&…

西北师范大学地理与环境科学学院考研真题汇总(高等数学)持续更新。。。

西北师范大学地理与环境学科学院研究生入学考试的所有专业(地图学与地理信息系统、自然地理学、人文地理学、环境科学、环境工程)的数学均为自主命题,复习参考教材为同济大学第五版。

Java网络编程二:Socket详解

Socket又称套接字&#xff0c;是连接运行在网络上两个程序间的双向通讯的端点。 一、使用Socket进行网络通信的过程 服务端&#xff1a;服务器程序将一个套接字绑定到一个特定的端口&#xff0c;并通过此套接字等待和监听客户端的连接请求。 客户端&#xff1a;客户端程序根据你…