深入理解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);
|
最低0.47元/天 解锁文章
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
