当前位置：首页 > news >正文

3.js - 纹理的重复、偏移、修改中心点、旋转

news 2025/7/14 14:36:53

你瞅啥

上字母


// @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'
// 导入hdr加载器（专门加载hdr的）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.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({antialias: true // 开启抗锯齿
})
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)// 更新tweenTWEEN.update()
}
animate()
//#endregion// --------------------------------------------------------------
// --------------------------------------------------------------// 设置贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {// 设置球形贴图，否则，环境贴图就像一个背景图片似的// envMap.mapping = THREE.EquirectangularReflectionMapping // 反射envMap.mapping = THREE.EquirectangularRefractionMapping // 折射// 给场景添加环境贴图scence.background = envMapscence.environment = envMap
})const textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('../public/assets/texture/amber/base_color.jpg')let planeGeometry = new THREE.PlaneGeometry(1, 1)
let material = new THREE.MeshBasicMaterial({map: texture,transparent: true
})
const plane = new THREE.Mesh(planeGeometry, material)
scence.add(plane)// 设置纹理在X轴、Y轴上的重复次数（纹理在两个方向上各重复4次）
texture.repeat.set(4, 4)// 设置水平重复
texture.wrapS = THREE.RepeatWrapping// 设置水平的重复方式为镜像重复
// texture.wrapS = THREE.MirroredRepeatWrapping// 设置垂直重复
texture.wrapT = THREE.RepeatWrapping// 纹理偏移
texture.offset.set(0.5, 0.5)// 纹理旋转
// texture.center.set(0.5, 0.5)
// texture.rotation = Math.PI / 4