threejs纹理

纹理

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

图片纹理

图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。文章地址https://www.yii666.com/article/758087.html

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属性网址:yii666.com

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例子】,其中貌似真实的环境,球的反光效果,都是用这张全景图渲染出来的: 
threejs纹理
球的反光看起来非常逼真,但其实是假的,也就四并没有使用光线追踪来表现出反光效果。光线追踪是很耗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模型例子】例子中,我们用到了一张图片: 
threejs纹理
这张图里面凌乱的放着摊开的人皮、衣服、手、眼睛等图片元素。而我们加载出来的模型是这样的: 
threejs纹理

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

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

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

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

打印出:

threejs纹理

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

threejs纹理

又是一个长度为3的Vector2数组,代表纹理图片中的三个位置,这三个点围成的部分就是这个三角面的纹理。上面的(0,0),(1,0),(1,1)都是比例,0代表0%,1代表100%。点是从右下角开始按逆时针排列的,比如A(0,0),B(1,0),C(1,1)三点,在图片中围成的区域如下: 
threejs纹理文章来源地址:https://www.yii666.com/article/758087.html

将这张图加载到立方体,能更清晰立方体是如何通过uv映射来处理纹理的,【例子】。文章来源地址https://www.yii666.com/article/758087.html


【持续更新看这里】

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png