一、简介

1.介绍

1.什么是UV映射？
UV映射是一种将二维纹理映射到三维模型表面的技术。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U, V）。U和V分别表示纹理坐标的水平和垂直方向。这些坐标用于将纹理图像上的像素与模型表面上的点进行对应。通过UV映射，我们可以在模型上精确地控制纹理的位置和方向。

2.UV坐标与顶点位置的关系和区别
顶点位置（Position）表示3D模型中每个顶点的空间坐标（x, y, z）。UV坐标则表示该顶点在纹理上的二维坐标（U, V）。顶点位置用于确定模型在场景中的形状，而UV坐标用于确定纹理在模型上的分布。
两者之间的主要区别在于：
● 顶点位置是三维坐标，描述了一个顶点在三维空间中的位置。
● UV坐标是二维坐标，描述了一个顶点在纹理图像上的位置。

2.属性

// 创建uv贴图
let uvTexture = new three.TextureLoader().load('./textureImage/UV.png')
// 创建平面材质
const planeMaterial = new three.MeshBasicMaterial({map: uvTexture})


//定点创建的几何体需要进行uv设置
// 设置uv坐标
const uvs = new Float32Array([
  0, 0, 1, 0, 1, 1, 0, 1
])
geomentry.setAttribute('uv', new three.BufferAttribute(uvs, 2))

二、设置

1.效果

2.代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(
  45, //视角 值越多视野越大
  window.innerWidth / window.innerHeight, //宽高比
  0.1, //近平面(相机最近能看到的物体)
  1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 添加背景颜色
scene.background = new three.Color(0x999999)

// 创建平面几何
const planeGeometry = new three.PlaneGeometry(2,2)

// 创建uv贴图
let uvTexture = new three.TextureLoader().load('./textureImage/UV.png')
// 创建平面材质
const planeMaterial = new three.MeshBasicMaterial({
  map: uvTexture
})

// 创建平面网格
const planeMesh = new three.Mesh(planeGeometry, planeMaterial)
planeMesh.position.x = -2
// 加入场景
scene.add(planeMesh)


// 创建几何体
const geomentry = new three.BufferGeometry()

// 使用索引绘制
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 创建顶点属性
geomentry.setAttribute('position', new three.BufferAttribute(vertices, 3))
// 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 创建索引属性
geomentry.setIndex(new three.BufferAttribute(indices, 1))
// 设置uv坐标
const uvs = new Float32Array([
  0, 0, 1, 0, 1, 1, 0, 1
])
geomentry.setAttribute('uv', new three.BufferAttribute(uvs, 2))

// 创建材质
const material = new three.MeshBasicMaterial({
  // color: 0xff0000,
  // side: three.DoubleSide //正反面都能看到
  // wireframe: true //线框模式
    map: uvTexture
})
// 创建网格
const cube = new three.Mesh(geomentry, material)
cube.position.x = 2
// 加入场景
scene.add(cube)
// 相机位置
camera.position.z = 5 //设置在z轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate) //每一帧调用函数
  renderer.render(scene, camera) // 重新渲染
}
animate()