three.js-texture

Three.js学习笔记 本篇介绍纹理的使用。

纹理

我们可以在材质中加载纹理,在Materialmap属性中。

    
    // 新建 Texture 加载器
    var loader = new THREE.TextureLoader();

	var texture = loader.load("img/text.png");

	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					map: texture
				});

前面用到的THREE.ImageUtils.loadTexture 已经被摒弃。


var texture = new THREE.ImageUtils.loadTexture("img/text.png");
                
				var material = new THREE.MeshBasicMaterial({
					color: 0x4d6dad,
					map: texture
				});
				

纹理的加载时异步的,所以需要注意。支持PNGGIFJPEG输入格式。
最好使用正方形图片,保证长宽都是2的次方大小。

凹凸贴图

凹凸贴图是一张灰度图,上面有像素的相对高度,可以用来增加材质的高度。


	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					bumpMap: texture
				});

法向贴图

法向贴图保存了像素的法向向量,可以使材质具有更加细致的凹凸和皱纹。


	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					normalMap: texture
				});

光照贴图

光照贴图是提前渲染好的阴影图片。


	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					lightMap: texture
				});

other

罗列这些是极为麻烦的,所以
learn more from http://threejs.org/

posted @ 2018-09-13 14:58  可爱的黑精灵  阅读(3699)  评论(0编辑  收藏  举报