Three.js纹理贴图

偏移
在这里插入图片描述
旋转

重复

纹理显示的清晰度

<template><div id="webgl"></div>
</template><script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const scene = new THREE.Scene();// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/Snipaste_2024-05-05_16-18-48.png')// 设置纹理偏移
// texture.offset.x = 0.5 // 向左偏移，负为反
// texture.offset.y = 0.5
// texture.offset.set(0.5, 0.5)
// 纹理旋转
// 设置旋转中心点
// texture.center.set(0.5, 0.5)
// texture.rotation = Math.PI / 4 // 旋转45°
// 设置纹理的重复
// texture.repeat.set(2, 3) // 水平重复2次，竖着重复3次
// 设置纹理重复的模式 (默认是将重复的纹理推至外部边缘)
// texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图，镜像重复
// texture.wrapT = THREE.RepeatWrapping // 垂直贴图，纹理重复到无穷大
// 纹理显示设置（通过算法实现）
// texture.minFilter = THREE.NearestFilter // 取最接近的
// texture.magFilter = THREE.NearestFilterconst geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ // 漫反射；可改为镜面反射MeshPhongMaterial// color: 0xff0000,//0xff0000设置材质颜色为红色map: texture
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);function render(time) {renderer.render(scene, camera);requestAnimationFrame(render);
}
render()
</script>