three.js 第十一节 - uv坐标

// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// -----------------------------------------------------------------
// -----------------------------------------------------------------

let uvTexture = new THREE.TextureLoader().load('../public/assets/texture/uv_grid_opengl.jpg')

// 创建平面
const planeGeometry = new THREE.PlaneGeometry(2, 2)
const planeMaterial = new THREE.MeshBasicMaterial({
  map: uvTexture
})
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
scence.add(planeMesh)
planeMesh.position.x = -4

// 创建几何体
const geometry = new THREE.BufferGeometry()
// 设置几何体的顶点数据（顶点是有序的，每3个数据确定一个顶点，逆时针为正面）
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 设置几何体的顶点属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
const idnex = new Uint16Array([0, 1, 2, 2, 3, 0]) // 创建索引
geometry.setIndex(new THREE.BufferAttribute(idnex, 1))

// 设置uv坐标
/*
  UV坐标表示纹理（texture）上的点的位置。
  UV坐标以两个浮点数值（u，v）的形式表示，通常在0到1的范围内，表示在纹理上的位置，
  UV坐标是通过模型的geometry的“uv”属性来设置，以便正确地将纹理映射到模型表面上
*/
// const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0])
// 设置几何体的uv属性
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))

const material = new THREE.MeshBasicMaterial({
  // color: 0x00ff00
  map: uvTexture
})

const plane = new THREE.Mesh(geometry, material)
scence.add(plane)
plane.position.x = 4
// -----------------------------------------------------------------
// -----------------------------------------------------------------

未设置 uv坐标 的效果

// const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
// 设置几何体的uv属性
// geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))

设置了 uv坐标 的效果

const uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
// 设置几何体的uv属性
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))