Three.js加载简单纹理贴图并应用到网格(凹凸贴图、法向贴图、移位贴图)
纹理贴图
- 简介
- 简单案例
- 结果
- 分析
- 完整代码
简介
- 纹理最基础的用法就是作为贴图被添加到材质上,当用这种方法创建网格时,网格的颜色就来源于纹理
- UV贴图实质上就是指定模型上的哪一部分需要被映射到纹理的相应位置
- 可以用如下方法加载纹理
var textureLoader = new THREE.TexturenLoader();
var texture = textureLoader.load("../../assets/textures/sss.jpg");
使用THREE.TextureLoader()从指定位置加载图片,图片格式可以是png,jpg或jpeg
- 纹理的加载是异步的:如果纹理加载较大,而程序在文件加载完成之前开始渲染场景,那么在最开始的瞬间会看到场景中一些物体没有贴图。如果希望等待纹理加载完成。可以为THREE.TextureLoader.load()添加回调函数。
var textureLoader = new THREE.TextureLoader();
var texture = textureLoder.load("../../assets/textures/sss.jpg",onloadFunction,onProgressFunction,onErrorFunction);
onloadFunction在纹理加载完成时被调用,onProgressFunction可以随时汇报加载进度,onError在纹理加载出故障时被调用
- 用图片来作为纹理使用时,最好使用长宽为2的次方的正方形图片
- 纹理的放大和缩小。可以设置magFilter属性来指定纹理如何放大,minFilter来指定纹理如何缩小
这两个属性的属性值可以设置如下表所示的属性值
名称 | 描述 |
---|---|
THREE.NearestFilter(最邻近过滤) | 这个过滤器会将纹理上最近的像素颜色应用于面上。在放大时,会导致方块化,在缩小时,会丢失很多细节 |
THREE.LinearFilter(线性过滤) | 这个过滤器最终的颜色是由周围四个像素值决定的。在缩小时仍会丢失一些细节,但是在放大时会平滑很多,方块化也比较少一些出现 |
也可以使用mipmap。mipmap是把纹理按照2的倍数进行缩小。mipmap纹理过滤模式如下表所示
关于mipmap,https://blog.csdn.net/qq_42428486/article/details/118856697
Three.js加载简单纹理贴图并应用到网格(凹凸贴图、法向贴图、移位贴图)相关推荐
- three.js为正方体6个面加载不同纹理(and天空图的制作)
实现功能 1.加载天空图. 2.OrbitControls视角控制器. 3.正方体6个面加载不同纹理. 实现效果 完整代码请看最底下,接下来进行分段功能介绍 功能代码解释 1.加载天空图 第一步:创建 ...
- three.js加载和使用纹理-加载DDS、PVR、TGA格式的纹理(vue中使用three.js73)
加载DDS.PVR.TGA格式的纹理 1.demo效果 2. 实现要点 2.1 加载DDS格式纹理 2.2 加载PVR格式纹理 2.3 加载TGA格式纹理 3. demo代码 1.demo效果 以上三 ...
- Three.js加载三维管线的简单思路
three.js中能够加载一定量的三维模型数据,当然也能够加载一定量的管线数据,three.js的鼠标操控,会影响到管线的摆放. 大多数三维平台中,加载管线的原理都差不多,只不过对应三维引擎中的API ...
- three.js 加载透明贴图模型不正常显示的问题,渲染透明贴图gltf模型
概述: 现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用three.js加载显示出来,但是在gltf Viewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多 ...
- CSS实现树形结构 + js加载数据
看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: 拉莫小学 一年级 一班 二班 二年级 三年级 一班 二班 三班 树的dom结构: <div ...
- vue使用three.js加载obj和mtl
①构建三维坐标,代码如下 <!-- --> <template><div id="container"></div> </te ...
- FusionCharts Free-使用JS加载-flash图表
使用JS加载 这个JS类文件就在FusionChartsFree>JSClass文件夹下,我们把它拷贝到c:FusionChartsFusionCharts下面. 现在,我们把原来的Chart. ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- python爬取js加载的数据_Python爬虫学习,记一次抓包获取js,从js函数中取数据的过程...
昨天有小伙伴找我,新浪新闻的国内新闻页,其他部分都是静态网页可以抓到,但是在左下方的最新新闻部分,不是静态网页,也没有json数据,让我帮忙抓一下.大概看了下,是js加载的,而且数据在js函数中,很有 ...
最新文章
- php如何word转html格式文件,PHP将上传word文件,转化为Html格式,(多种转换方式)
- leetcode算法题--网格照明
- 大数据职业理解_到底什么是大数据,大数据职业的具体工作内容是什么?
- 【利好工具】JavaScript及时运行调试工具
- 【VS2015】 C++实现硬件ID的查询
- 一文带你读懂点击劫持详解+实验
- 幼儿园作业(毕业季)
- 用U盘制作PE启动盘安装Windows10系统
- Hbuilder 教程
- 震惊了,王者荣耀项目组发了60个月的年终奖!!!妈妈,我要做游戏
- 使用poi导出excel
- 在广州如何申请住房公积金贷款
- Python中使用遍历在列表中添加字典的坑
- 森林救火与计算机相关,无人机森林防火解决方案包含了哪些技术?
- WIN7下WIFI共享上网教程
- linux openssl 编译错误,“致命错误:openssl/opensslv.h:没有这样的文件或目录”编译mitmproxy...
- 从后台拿到webshell
- 美团网CEO王兴:创业十年屡败屡战 终成硕果
- JavaScript恶意代码
- 「抖直播」开发技术复盘
热门文章
- java lang r,内存泄漏?为什么java.lang.ref.Finalizer吃了这么多内存
- hadoop3的简单安装方法(单节点)
- python dataframe取一列_pandas取dataframe特定行/列
- CSS水平垂直居中常见方法总结(转)
- Java小农养成记第十四天
- html清除浮动的那一块区域,CSS中的BFC,外边距折叠,清除浮动
- 编程实现。输入年份和月份,计算这一年这个月有多少天。
- 移植 linux-5.8.5 到 iTOP-4412(一)build config
- 洪君:base64图片文件上传转MultipartFile文件、王君:java、springboot 君子:洪君
- JavaScript历史