您的位置:首页 > Web前端 > JavaScript

threejs(三) 光源,材质,纹理

2016-05-23 00:32 330 查看

光源

光源基类

THREE.Light ( hex )


由基类派生出来的其他种类光源



THREE.AmbientLight( hex ) ,当仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度

PointLight( color, intensity, distance )

Color:光的颜色

Intensity:光的强度,默认是1.0,就是说是100%强度的灯光

distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从Intensity衰减为0。 默认情况下,这个值为0.0,表示光源强度不衰减。

THREE.SpotLight( hex, intensity, distance, angle, exponent ) ,聚光灯:这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果。使用这种光源需要指定光的射出方向以及锥体的顶角α。

Angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。

exponent:光源模型中,衰减的一个参数,越大衰减约快。

材质

材质的真相是光,离开光,材质是无法体现的

不带光源的物体

var material = new THREE.MeshLambertMaterial( { color:0x000000} ); // 这是兰伯特材质,材质中的一种


兰伯特材质与光源

环境光

方向光(平行光)

//THREE.DirectionalLight = function ( hex, intensity )


点光源

纹理

构造函数

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轴的纹理的回环方式,就是当纹理的宽度小于需要贴图的平面的宽度的时候,平面剩下的部分应该p以何种方式贴图的问题。

wrapT:表示y轴的纹理回环方式。

magFilter和minFilter表示过滤的方式,这是OpenGL的基本概念。当您不设置的时候,它会取默认值。

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

type:表示存储纹理的内存的每一个字节的格式,是有符号,还是没有符号,是整形,还是浮点型。不过这里默认是无符号型(THREE.UnsignedByteType)。暂时就解释到这里,有需要时,我们在仔细分析,或者给作者留言询问。

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


一个小例子

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: