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();
相关推荐
武子康几秒前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘
使者大牙10 分钟前
【大语言模型学习笔记】第一篇:LLM大规模语言模型介绍
笔记·学习·语言模型
As977_32 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
ajsbxi35 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking36 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
dsywws1 小时前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然04021 小时前
Ethernet 系列(8)-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒1 小时前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
cuisidong19973 小时前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录3 小时前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习