Three.js之顶点UV坐标、纹理贴图

参考资料

知识点

注：基于Three.jsv0.155.0

纹理贴图加载器：TextureLoader
纹理对象：Texture
颜色贴图属性.map
顶点UV坐标
圆形平面设置纹理贴图：CircleGeometry
设置阵列模式：THREE.RepeatWrapping
网格地面辅助观察：GridHelper
纹理对象.offset属性

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.js</title>
</head>
  <body>
  </body>
  <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
  <script type="importmap">
    {
      "imports": {
        "three": "./js/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 width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();

    // ********** 本章知识点示例代码 Start **********
    // 1. 创建纹理贴图
    // 几何体
    const geometry = new THREE.SphereGeometry(100);
    // const geometry = new THREE.BoxGeometry(100, 100 ,100);
    // 文理贴图
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('./img/6.JPG');

    // 材质 
    const material = new THREE.MeshLambertMaterial({
      // color:0x0000ff,
      map: texture,
    });

    material.map = texture;

    const mesh1 = new THREE.Mesh(geometry, material);
    scene.add(mesh1);

    // 2. 自定义顶点UV坐标
    scene.remove(mesh1);

    const geometry2 = new THREE.PlaneGeometry(200, 100);
    console.log('🚀 ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.uv:', geometry.attributes.uv);
    console.log('🚀 ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.position:', geometry.attributes.position);
    const textureLoader2 = new THREE.TextureLoader();
    const texture2 = textureLoader2.load('./img/6.JPG');

    geometry2.attributes.uv = new THREE.Float32BufferAttribute([
      0, 1,
      1, 1,
      0, 0,
      1, 0,
    ], 2);

    // 材质 
    const material2 = new THREE.MeshLambertMaterial({
      // color:0x0000ff,
      map: texture2,
    });

    const mesh2 = new THREE.Mesh(geometry2, material2);
    scene.add(mesh2);

    // 3. 圆形平面设置纹理贴图
    scene.remove(mesh2);

    const geometry3 = new THREE.CircleGeometry(100);
    const textureLoader3 = new THREE.TextureLoader();
    const texture3 = textureLoader3.load('./img/6.JPG');

    // 材质 
    const material3 = new THREE.MeshLambertMaterial({
      // color:0x0000ff,
      map: texture3,
    });

    const mesh3 = new THREE.Mesh(geometry3, material3);
    scene.add(mesh3);

    // 4. 纹理对象Texture阵列
    scene.remove(mesh3);

    const geometry4 = new THREE.PlaneGeometry(400, 400);
    const textureLoader4 = new THREE.TextureLoader();
    const texture4 = textureLoader4.load('./img/6.JPG');
    texture4.wrapS = THREE.RepeatWrapping;
    texture4.wrapT = THREE.RepeatWrapping;
    texture4.repeat.set(10, 10);

    // 材质 
    const material4 = new THREE.MeshLambertMaterial({
      // color:0x0000ff,
      map: texture4,
      side: THREE.DoubleSide,
    });

    const mesh4 = new THREE.Mesh(geometry4, material4);
    mesh4.rotateX(-Math.PI / 2);
    scene.add(mesh4);

    
    // 5. 矩形Mesh+背景透明png贴图
    scene.remove(mesh4);

    const geometry5 = new THREE.PlaneGeometry(600, 200);
    const textureLoader5 = new THREE.TextureLoader();
    const texture5 = textureLoader5.load('./img/6.JPG');
    texture5.wrapS = THREE.RepeatWrapping;

    // 材质 
    const material5 = new THREE.MeshLambertMaterial({
      // color:0x0000ff,
      map: texture5,
      side: THREE.DoubleSide,
      transparent: true,
    });

    const mesh5 = new THREE.Mesh(geometry5, material5);
    mesh5.rotateX(-Math.PI / 2);
    scene.add(mesh5);

    // 网格地面辅助观察
    const grid = new THREE.GridHelper(500, 10);
    grid.position.set(0, -0.01, 0);
    scene.add(grid);
    mesh5.position.y = 1

    // ********** 本章知识点示例代码 End **********
    
    

    // 光源
    const pointLight = new THREE.PointLight(0xffffff, 1.0, 0, 0);
    pointLight.position.set(200, 200, 200 );
    scene.add(pointLight);

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

    // 渲染循环
    function render() {
        texture5.offset.x += 0.005;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();
  </script>
</html>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

相关阅读:
RedisInsight ：Redis 官方可视化工具使用入门
 Android shape与selector标签使用
 华为OD机试 - 用户调度问题（Java 2023 B卷 100分）
什么是蜘蛛池？-免费蜘蛛池搭建软件
 小师兄1995个人博客总目录
 松翰SN8P2511 SOP8单片机可代烧录提供单片机方案开发单片机解密
 船舶设计公司MiNO Marine将HPC外包给Nimbix云后提高了船舶设计速度
 通达信matlab接口如何读取数据？
POJ 3185 The Water Bowls 反转+点灯游戏
 【linux命令讲解大全】014.Git：分布式版本控制系统的先驱和常用命令清单(三)
原文地址：https://blog.csdn.net/u010678947/article/details/132792700