200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > threejs 纹理流动_Three.js纹理(一)

threejs 纹理流动_Three.js纹理(一)

时间:2019-05-20 05:48:37

相关推荐

threejs 纹理流动_Three.js纹理(一)

一、概念

3D世界的纹理由图片组成。将纹理以一定的规则映射到几何体上,一般是三角形上,那么这个几何体就有纹理皮肤了。

那么在threejs中,或者任何3D引擎中,纹理应该怎么来实现呢?首先应该有一个纹理类,其次是有一个加载图片的方法,将这张图片和这个纹理类捆绑起来。

在threejs中,纹理类由THREE.Texture表示,其构造函数如下所示:

THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

各个参数的意义是:

Image:这是一个图片类型,基本上它有ImageUtils来加载,如下代码var image = THREE.ImageUtils.loadTexture(url); // url 是一个http://xxxx/aaa.jpg 的类似地址,javascript没有从本地加载数据的能力,所以没有办法从您电脑的C盘加载数据。

Mapping:是一个THREE.UVMapping()类型,它表示的是纹理坐标。

wrapS:表示x轴的纹理的回环方式,就是当纹理的宽度小于需要贴图的平面的宽度的时候,平面剩下的部分应该以何种方式贴图的问题。

wrapT:表示y轴的纹理回环方式。 magFilter和minFilter表示过滤的方式,这是OpenGL的基本概念。

format:表示加载的图片的格式,这个参数可以取值THREE.RGBAFormat,RGBFormat等。THREE.RGBAFormat表示每个像素点要使用四个分量表示,分别是红、绿、蓝、透明来表示。RGBFormat则不使用透明,也就是说纹理不会有透明的效果。

type:表示存储纹理的内存的每一个字节的格式,是有符号,还是没有符号,是整形,还是浮点型。不过这里默认是无符号型(THREE.UnsignedByteType)。

anisotropy:各向异性过滤。使用各向异性过滤能够使纹理的效果更好,但是会消耗更多的内存、CPU、GPU时间。

纹理坐标:

在正常的情况下,你在0.0到1.0的范围内指定纹理坐标。我们来简单看一下纹理坐标如下图:

当我们用一幅图来做纹理的时候,那么这幅图就隐示的被赋予了如图一样的纹理坐标,这个纹理坐标将被对应到一个形状上。

二、实例

}

varcamera, scene, renderer;varmesh;

init();

animate();functioninit() {

renderer= newTHREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );//camera= newTHREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight,1,1000);

camera.position.z= 400;

scene= newTHREE.Scene();vargeometry= newTHREE.PlaneGeometry(500,300,1,1);

geometry.vertices[0].uv= newTHREE.Vector2(0,0);

geometry.vertices[1].uv= newTHREE.Vector2(2,0);

geometry.vertices[2].uv= newTHREE.Vector2(2,2);

geometry.vertices[3].uv= newTHREE.Vector2(0,2);//纹理坐标怎么弄

vartexture=THREE.ImageUtils.loadTexture("textures/a.jpg",null,function(t)

{

});varmaterial= newTHREE.MeshBasicMaterial({map:texture});varmesh= newTHREE.Mesh( geometry,material );

scene.add( mesh );//window.addEventListener('resize', onWindowResize,false);

}functiononWindowResize() {

camera.aspect=window.innerWidth/window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}functionanimate() {

requestAnimationFrame( animate );

renderer.render( scene, camera );

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。