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

1、纹理贴图

javascript 复制代码

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、纹理对象阵列，实现地面效果。

javascript 复制代码

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

javascript 复制代码

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偏移属性实现动画

javascript 复制代码

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();