ThreeJs学习-纹理贴图、顶点UV坐标

1、纹理贴图

import * as THREE from 'three'const loader = new THREE.TextureLoader(); //纹理加载器
const texture = loader.load('./earth.png'); .load()方法加载图像，返回一个纹理对象Texture
const material = new THREE.MeshLambertMaterial({map: texture
});
texture.colorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间const geometry = new THREE.SphereGeometry(100)
const mesh = new THREE.Mesh(geometry, material);export default mesh

效果：把一个地球的图片贴到一个球体上

2、纹理对象阵列，实现地面效果。

主要使用的是设置阵列模式和uv两个方向纹理重复数量
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(30, 30)

import * as THREE from 'three';const geometry = new THREE.PlaneGeometry(100, 100);const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./floor.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(30, 30)
const material = new THREE.MeshBasicMaterial({map: texture,side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(Math.PI / 2)
export default mesh;

3、UV坐标

UV坐标的作用是从纹理贴图上提取像素映射到网格模型mesh的表面

4、背景透明png贴图

 设置材质的transparent: true，这样png图片背景完全透明。

5、通过纹理的offset偏移属性实现动画

import * as THREE from 'three';const textureLoader = new THREE.TextureLoader(); //创建纹理加载器
const texture = textureLoader.load('./line.jpg');//加载图片
texture.wrapS = THREE.RepeatWrapping; //设置阵列
texture.repeat.x = 30; // uv两个方向纹理重复数量
const geometry = new THREE.PlaneGeometry(100, 100);const material = new THREE.MeshBasicMaterial({map: texture
});const mesh1 = new THREE.Mesh(geometry, material);
mesh1.rotateX(-Math.PI / 2)
export { mesh1, texture }// //渲染
function animate() {texture.offset.x += 0.1 // 纹理偏移属性requestAnimationFrame(animate);stats.update();renderer.render(scene, camera);
}const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {// renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件animate();