threejs纹理

纹理

纹理用来表现物体的细节。理论上可以将物体的每个细节建模出来,但是这样时间成本和性能成本都太高,因此,将物体的一些细节用纹理来表示。

图片纹理

图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。

function loadImgTexture(){var loader = new THREE.TextureLoader();loader.load("metal-rust.jpg",function(texture){var geometry = new THREE.BoxGeometry(10,10,10);var material = new THREE.MeshBasicMaterial({color:0x739783,map:texture});mesh = new THREE.Mesh(geometry,material);scene.add(mesh);})
}

注意加载图片是异步的,所以这里我们使用render循环来渲染:

function render(){requestAnimationFrame(render);renderer.render(scene,camera);
}

凹凸贴图

凹凸贴图可以使纹理也有厚度,看起来更立体。凹凸贴图一般使用一张灰度图,设置成材料的bumpMap属性

function loadImgTexture(){var loader = new THREE.TextureLoader();loader.load("stone.jpg",function(texture){loader.load("stone-bump.jpg",function(bumpTexture){var geometry = new THREE.BoxGeometry(10,10,10);var material = new THREE.MeshPhongMaterial({map:texture,bumpMap:bumpTexture,bumpScale:0.2});mesh = new THREE.Mesh(geometry,material);mesh.rotation.x = 30/180Math.PI;scene.add(mesh);})})
}

凹凸贴图虽然看起来更立体,但是其只是有深度,没有方向,所以只有在某个方向看是很立体,在其它方向看又不好。如果贴图的对象不怎么转动,光线也不怎么变化,倒可以使用凹凸贴图。

法向贴图

法向贴图使用一张法向图来表示纹理图片某个点的法向量。即用一张图片保存另一张图片的法向量信息,然后再在threejs中将这两个图片的信息合在一起,就形成了一个细节丰富的立体纹理。创建法向贴图如下,注意这里不要再使用MeshBasicMaterial:

function loadImgTexture(){var loader = new THREE.TextureLoader();loader.load("plaster.jpg",function(texture){loader.load("plaster-normal.jpg",function(normalTexture){var geometry = new THREE.BoxGeometry(10,10,10);var material = new THREE.MeshPhongMaterial({map:texture,normalMap:normalTexture,bumpScale:0.2});mesh = new THREE.Mesh(geometry,material);mesh.rotation.x = 30/180Math.PI;scene.add(mesh);})})
}

法向贴图可以生成细节丰富的纹理,同时不损害渲染性能。但是法向图这张图片创建起来稍有困难,使用Blender或Photo创建。

光照贴图

环境贴图

环境贴图是使用上下左右前后六张图或者一张全景图来模拟真实的环境,threejs会将这些图片渲染成无缝的环境盒子,例子可看【threejs-cubeMap例子】,其中貌似真实的环境,球的反光效果,都是用这张全景图渲染出来的:

球的反光看起来非常逼真,但其实是假的,也就四并没有使用光线追踪来表现出反光效果。光线追踪是很耗cpu的,所以,使用环境贴图即节约性能,又能表现出很逼真的效果。

UV贴图

关于uv贴图,【blender wiki】里面说得很好:


UV贴图是将2D纹理映射到3D物体最灵活的一种方式.在这个过程中三维曲面网络("mesh")的X Y Z被展平到一副二维(X Y 或者说 我们将要看到的 U V)图片中,这样图片中的颜色就被映射到曲面网络("mesh")中。
有助于理解UV贴图的最形象的比喻是切开一个硬纸盒.盒子是一个三维物体,正如同加到场景中的一个曲面网络("mesh")方块.
如果沿着边缝或折痕剪开盒子,可以把盒子摊开在一个桌面上.当我们从上往下俯视桌子时,我们可以认为U是左右方向,V是上下方向.盒子上的图片就在一个二维坐标中.我们使用U V代表"纹理坐标系"来代替通常在三维空间使用的 X Y.

如果给模型的每个面都用一张图片去贴纹理,这将要加载很多纹理图片,如果可以只将图片的某个部分映射到模型,那就只需要一张图片就够了。uv贴图就能够将图片的某部分映射到模型的某个面,如果还不好理解,类比一下CSS Sprite技术。比如,上一篇【加载3D模型例子】例子中,我们用到了一张图片:

这张图里面凌乱的放着摊开的人皮、衣服、手、眼睛等图片元素。而我们加载出来的模型是这样的:

在这张图中,脸是脸,衣服是衣服,都在它们应该出现的位置。这便是使用了uv映射,将图中的某部分作为纹理,贴到模型中的对应部分。

但是,图中的各个部分,是怎么和模型对应起来的呢?一个人的模型有那么多个面,纯手工编码一个个去对应,感觉会出人命。其实,uv贴图一般是做模型的时候就做好了,图和模型的对应关系也包含在模型文件(就是那个.dae文件)中了,编程的时候一般是不用关心这个。

虽说如此,我们加载模型之后,也可以通过Geometry对象的faceVertexUvs属性看看具体是怎么映射的。简单起见,创建一个BoxGometry,查看一个其内置的uv映射:

var geom = new THREE.BoxGeometry(24, 24, 24);
console.log(geom.faceVertexUvs);

打印出:

是一个有12个元素的数组,12代表的就是立方体的12个三角面。再看数组的具体某一个元素:

又是一个长度为3的Vector2数组,代表纹理图片中的三个位置,这三个点围成的部分就是这个三角面的纹理。上面的(0,0),(1,0),(1,1)都是比例,0代表0%,1代表100%。点是从右下角开始按逆时针排列的,比如A(0,0),B(1,0),C(1,1)三点,在图片中围成的区域如下:

将这张图加载到立方体,能更清晰立方体是如何通过uv映射来处理纹理的,【例子】。


【持续更新看这里】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 列换行 表设计 设计_今天来讲一下怎么利用MySql进行库表设计

今天来讲一下怎么利用MySql进行库表设计1 引擎选择在 mysql 5.1 中,引入了新的插件式存储引擎体系结构,允许将存储引擎加载到正在运新的 mysql 服务器中。使用 mysql 插件式存储引擎体系结构,允许数据库专业人员或者设计库表的软件开发人员为…

刷题向》一道逆向思维题(BZOJ1046)(NORMAL)

这道题对于一类题都有一个通用思路:反向递减序列即为正向字典序。 对于逆向思维的题还要多做才能培养这种对于逆向思维的感觉。 想到这种方法之后,就很简单了。 因为nm不会炸,所以反向LIS叠一个贪心就能过了。 直接甩题目&代码 Descripti…

threejs对象拾取

对象拾取 对象拾取也就是要获得鼠标事件发生位置的图形对象。在threejs中,是通过Raycaster 对象来拾取对象的,ray是射线,caster是投射器,从字面上即可理解其工作原理是:从某个方向发射一条射线,穿过鼠标所…

android webview权限申请_android - 在运行时向摄像机请求WebView权限 - 堆栈内存溢出...

我想在Android WebView的PWA中使用QR码扫描仪。PWA在chrome浏览器上可以正常工作。我确实有在“应用程序”->“应用程序名称”->“权限”下设置摄像机的权限minSdkVersion 26和targetSdkVersion 28在装有Android 9的华为手机上测试问题是似乎没有授予该权限。 另外&#…

threejs指定对象旋转中心

指定对象旋转中心 默认情况下,对象的旋转中心都是自身的中心。对于组对象而言,也是如此。因此,可以利用这个特点,实现对象绕任何点旋转,也就是指定旋转中心。比如我们想要下图的对象绕A点旋转 我们可以添加我们的对…

threejs设置对象层次

设置层次 threejs提供了层次的支持。和相机处于同一层次的对象可见,否则不可见。在threejs中,最多可以设置32层,默认的层次是1。层次在有些系统中很有用,可以将不同的模式的对象设成不同的层次,这样,切换模…

法那科机器人初始化启动_发那科机器人的控制方式和控制柜的启动方式

工业机器人能得到广泛应用,得益于它拥有有多种控制方式,按作业任务的不同,可主要分为点位控制方式、连续轨迹控制方式、力(力矩)控制方式和智能控制方式四种控制方式。1.点位控制方式(PTP)这种控制方式只对工业机器人末端执行器在作业空间中某…

Text段、Data段和BSS段

不同的compiler在编译的过程中对于存储的分配可能略有不同,但基本结构大致相同。 大体上可分为三段:Text段、Data段和BSS段。 text段用于存放代码,通常情况下在内存中被映射为只读,但data和bss是可写的。 数据存放通常分成如下几个…

threejs渲染器剔除模式

渲染器剔除模式 渲染器可以设置成舍弃某些面,如前面、背面等,在【WebGLRenderer Constants】中对此有说明。默认情况下,是剔除掉背面,也就是背对着相机的面。下面看看例子: 首先创建一个正方形,给每个面不…

扫地机器人测评云鲸_云鲸科技,J1测评

云鲸科技,J1测评2020-01-07 16:27:393点赞5收藏11评论9月30日 - 11月10日,能省会花,值友当家!参与#我的省钱绝活#征稿活动,分享你的省钱绝活!发文就有100金币,千元京东卡等你来拿!点…

XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

A. Nanoassembly 首先用叉积判断是否在指定向量右侧&#xff0c;然后解出法线与给定直线的交点&#xff0c;再关于交点对称即可。 #include<bits/stdc.h> using namespace std; const int Maxn300020; typedef long long LL; typedef pair<int,int>pi; struct P{do…

threejs向量夹角和夹角方向

计算向量的夹角 计算向量的夹角&#xff1a; v1 new THREE.Vector3(5,0,0); v2 new THREE.Vector3(5,5,0); v1.angleTo(v2); //0.7853981633974484 v2.angleTo(v1); //0.7853981633974484可见&#xff0c;向量的夹角是没有方向的。但是有时候&#xff0c;又需要计算夹角的…

web版本 开源压测工具_siege--Web性能压测工具

-V, --version VERSION, prints the version number.-h, --help HELP, prints this section.-C, --config CONFIGURATION, show the current config.//显示当前的默认装置-v, --verbose VERBOSE, prints notification to screen.//详细通知打印到屏幕&#xff0c;输…

threejs路径

路径 引用百度百科的解释&#xff1a; 路径通常指存在于多种计算机图形设计软件中的以贝塞尔曲线为理论基础的区域绘制方式。路径在Canvas、SVG上都有相关定义&#xff0c;一般用来创建形状。在threejs中&#xff0c;也可以用来创建形状&#xff0c;除此之外&#xff0c;还可…

OpenGL ES 纹理设置

纹理过滤纹理采样最近点采样线性纹理采样MIPMAP纹理纹理过滤 纹理拉伸&#xff1a;重复拉伸和截取拉伸 用于指定纹理坐标超过(00.0,1.0)范围时所发生的行为&#xff0c;使用glTexParameterf函数指定&#xff0c;GL_TEXTURE_WRAP_S 定义 s 坐标超出范围[0.0, 1.0]的情况&#xf…

安装kubernetes dashboard时开发环境,运行gulp local-up-cluster任务一直显示wating for a heapster

问题 按照官方教程搭建dashboard的开发环境&#xff0c;运行“gulp local-up-cluster”任务&#xff0c;一直不断显示“waiting for a heapster…”&#xff0c;日志如下&#xff1a; ... [16:37:22] Finished spawn-cluster after 670 ms ... [16:37:22] Finished wait-for-…

react做h5 例子_使用React写一个网站的心得体会

网站是毕业设计的作品&#xff0c;开发这个网站的目的主要用于记录一些笔记&#xff0c;以及聚合一些资讯信息&#xff0c;也算自己在网络世界中的一块静地吧&#xff0c;可以在这里一些技术上想法的实践。网站最初前端使用vue开发&#xff0c;在前段时间由于项目的开发进度已经…

linux命令小常识

作为一个tester我们必须要会linux,也许你会说不用也可以。那么我想问,你部署测试环境在哪里&#xff0c;你下载war包并部署war包呢&#xff0c;你看日志在哪里&#xff1f; 基于测试需要用到liunx&#xff0c;我这里只针对需要用到的&#xff0c;工作就是不断在探索中学习&…

ubuntu联网不稳定,时断时连问题的解决办法

概览 ubuntu联网不稳定&#xff0c;时断时连问题的解决办法现象网络一会儿连上&#xff0c;过一会又自动断开&#xff0c;再等一会儿又断了。问题原因可能是受ipv6的影响解决办法关闭掉ipv6 详细步骤 1、编辑连接&#xff0c;打开“ipv6 settings”&#xff0c;将method设置…

如何根据原理图画封装_常用原理图封装

原理图常用库文件&#xff1a;Miscellaneous Devices.ddbDallas Microprocessor.ddbIntel Databooks.ddbProtel DOS Schematic Libraries.ddbPCB元件常用库&#xff1a;Advpcb.ddbGeneral IC.ddbMiscellaneous.ddb分立元件库部分 分立元件库元件名称及中英对照AND 与门ANTENNA …