当前位置: 首页 > article >正文

43. 创建纹理贴图

通过纹理贴图加载器TextureLoaderload()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

const geometry = new THREE.PlaneGeometry(200, 100); 
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像,返回一个纹理对象Texture
const texture = texLoader.load('./earth.jpg');
const material = new THREE.MeshLambertMaterial({
    // 设置纹理贴图:Texture对象作为材质map属性的属性值
    map: texture,//map表示材质的颜色贴图属性
});

颜色贴图属性.map

也可以通过颜色贴图属性.map直接设置纹理贴图,和材质的参数设置一样。

material.map = texture;

颜色贴图和color属性颜色值会混合

材质的颜色贴图属性.map设置后,模型会从纹理贴图上采集像素值,这时候一般来说不需要再设置材质颜色.color.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

颜色贴图map和color属性颜色值会混合。如果没有特殊需要,设置了颜色贴图.map,不用设置color的值,color默认白色0xffffff。

const material = new THREE.MeshLambertMaterial({
    // color: 0x00ffff,
    // 设置纹理贴图:Texture对象作为材质map属性的属性值
    map: texture,//map表示材质的颜色贴图属性
});

测试不同几何体添加纹理贴图的效果

你可以尝试把颜色纹理贴图映射到不同的几何体上查看渲染效果,至于为什么映射效果不同,其实和UV坐标相关,具体可以关注下节课关于UV坐标的讲解。

const geometry = new THREE.BoxGeometry(100, 100, 100); //长方体
const geometry = new THREE.SphereGeometry(60, 25, 25); //球体

注意!

注意最新版本,webgl渲染器默认编码方式已经改变,为了避免色差,纹理对象编码方式要修改为THREE.SRGBColorSpace

texture.colorSpace  = THREE.SRGBColorSpace;//设置为SRGB颜色空间

http://www.kler.cn/news/327376.html

相关文章:

  • 使用Qt实现实时数据动态绘制的折线图示例
  • 从入门到精通:单片机 100个关键技术关键词
  • (最新已验证)stm32 + 新版 onenet +dht11+esp8266/01s + mqtt物联网(含微信小程序)上报温湿度和控制单片机(保姆级教程)
  • 信号量SEM
  • 淘宝商品详情API接口多线程调用:解锁数据分析行业的效率新篇章
  • Linux防火墙配置绿色端口,解决无法访问java服务的问题
  • LINUX下的驱动开发三
  • window系统下nginx管理脚本
  • 【数据库】深入解析 MongoDB 数据库语法
  • 《OpenCV 计算机视觉》—— 视频背景建模
  • 【React】react hooks的使用规则
  • 基于深度学习的持续的知识积累与转移
  • golang学习笔记19-面向对象(一):面向对象的引入
  • 9.30学习
  • 南沙C++信奥赛陈老师解一本通题: 1963:【13NOIP普及组】小朋友的数字
  • Redis 性能优化的高频面试题及答案
  • HAProxy 安全配置
  • 正则表达式中的贪婪模式和非贪婪模式
  • [大语言模型-论文精读] 大语言模型是单样本URL分类器和解释器
  • 相互作用的检索增强 3D 分子生成扩散模型 - IRDiff 评测
  • 滚雪球学MySQL[5.1讲]:事务与并发控制
  • 如何使用ssm实现钢铁集团公司安全管理系统的构建与实现
  • 基于小步大步法(BSGS)的同态加密多项式求值
  • 滚雪球学Oracle[2.1讲]:Oracle数据库安装与配置
  • 新品上市!智能无线接入型路由器ZX7981EP,WIFI6技术双频频段
  • 解锁微信小程序新技能:ECharts动态折线图搭配WebSocket,数据刷新快人一步!
  • 数据库 - Mongo数据库
  • 第166天:应急响应-拒绝服务钓鱼指南DDOS压力测试邮件反制分析应用日志
  • ubuntu server 常用配置
  • Spring面试内容大纲