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();
相关推荐
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
pq113_61 小时前
ftdi_sio应用学习笔记 3 - GPIO
笔记·学习·ftdi_sio
澄澈i2 小时前
设计模式学习[8]---原型模式
学习·设计模式·原型模式
爱米的前端小笔记2 小时前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘
alikami3 小时前
【前端】前端学习
学习
一只小菜鸡..3 小时前
241118学习日志——[CSDIY] [ByteDance] 后端训练营 [06]
学习
Hacker_Oldv4 小时前
网络安全的学习路线
学习·安全·web安全
蒟蒻的贤4 小时前
vue学习11.21
javascript·vue.js·学习
高 朗4 小时前
【GO基础学习】基础语法(2)切片slice
开发语言·学习·golang·slice
码上有前5 小时前
解析后端框架学习:从单体应用到微服务架构的进阶之路
学习·微服务·架构