14-uv坐标和uv动画

uv坐标

• main.js

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import mesh from "./uv.js";

const scene = new THREE.Scene();

scene.add(mesh);

const axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();

document.body.append(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

• uv.js

import * as THREE from "three";

const geometry = new THREE.PlaneGeometry(200, 100);

const loader = new THREE.TextureLoader();
const texture = loader.load("./textures/1.jpg");
texture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshBasicMaterial({
  map: texture,
});

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

console.log(mesh);

export default mesh;

如下图:

• geometry.attributes.uv 是和顶点一一对应的 uv 坐标。
• 也就是 4 个顶点分别对应了 4 个 uv 坐标

• 其实我们可以用点集合的方式来设置

// 把 uv 坐标限定在了 0,0 到 0.5,0.5 的区域
const uvs = new Float32Array([
    0, 0.5,
    0.5, 0.5,
    0, 0,
    0.5, 0
]);

geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2);//设置2个为一组

• 图如下:

uv动画

• 纹理对象 Texture 有个 offset 属性，可以让纹理贴图在 x、y 方向做一些偏移。
• 相当于改变了 uv 坐标，所以这种改变 texture.offset 的动画叫做 uv 动画。

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import mesh from "./uv.js";

const scene = new THREE.Scene();

scene.add(mesh);

// const axesHelper = new THREE.AxesHelper(200);
// scene.add(axesHelper);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

function render() {
  mesh.material.map.offset.y += 0.001;//做的uv动画
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();

document.body.append(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

• uv.js

import * as THREE from "three";

const loader = new THREE.TextureLoader();
const texture = loader.load("./textures/1.jpg");
texture.colorSpace = THREE.SRGBColorSpace;
// 竖直方向重复，所以设置 wrapT
texture.wrapT = THREE.RepeatWrapping; //设置重复避免后面无纹理了

const geometry = new THREE.SphereGeometry(50);

const material = new THREE.MeshBasicMaterial({
  map: texture,
});

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

console.log(mesh);

export default mesh;

如下: 实现纹理贴图无限滚动的效果，也是 uv 动画