Three.js——纹理

Texture（纹理）

按照Three.js官方的解释是，创建一个纹理贴图，将其应用到一个几何体的表面，或者作为反射/折射贴图。简单的理解就是，让一个几何体拥有属于它的外貌。

代码实现

实现纹理贴图的方式有多种，如果仅是简单的使用，不牵扯到具体映射坐标的定义的话，有以下两种：

通过ImageLoader

        //通过ImageLoader
		var imageLoader = new THREE.ImageLoader();
		//加载图片
		imageLoader.load('图片路径', function(img) {
			var texture = new THREE.Texture(img);
			//下次使用纹理时触发更新
			texture.needsUpdate = true;
			var material = new THREE.MeshLambertMaterial({
				map: textture
			});
			var mesh = new THREE.Mesh(geometry, material);	
			scene.add(mesh);
			//如果只渲染一次的话，渲染方法必须写在回调内
			//多次则在渲染函数中使用requestAnimationFrame
		})

通过TextureLoader

       var textureLoader = new THREE.TextureLoader();
		var text = textureLoader.load('图片路径');
		var material = new THREE.MeshLambertMaterial({
			map: texture
		});
		var mesh = new THREE.Mesh(geometry, material);
		scene.add(mesh);

需要注意的是textureLoader还有回调的参数，这个回调会返回纹理对象，所以也可以将纹理贴图的代码放在回调中，如:

	  	textureLoader.load('Earth.png', function(texture) {
			var material = new THREE.MeshLambertMaterial({
				map: texture
			});
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			//在下面操作渲染
		})

下面创建一个旋转的且带地球纹理的球体

运行效果：

代码：

        /**
			创建场景对象
		*/	
		var scene = new THREE.Scene();
		/**
			创建网格模型
		*/
		//创建图片加载器
		//创建球体
		var geometry = new THREE.SphereGeometry(60, 32, 32);
		var imageLoader = new THREE.ImageLoader();
		//加载图片
		imageLoader.load('Earth.png', function (img) {
			//创建纹理对象
			var texture = new THREE.Texture(img);
			//下次使用纹理时触发更新
			texture.needsUpdate = true;
			var material = new THREE.MeshLambertMaterial({
				map: texture  //设置纹理贴图
			});
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			//render方法必须在这里执行
			render()
		});

		/**
			光源设置
		*/
		var point = new THREE.PointLight(0xffffff);
		point.position.set(400, 200, 300);
		scene.add(point);
		/**
			相机设置
		*/
		var width = window.innerWidth;
		var height = window.innerHeight;
		var k = width / height;
		//创建相机对象
		var camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000);
		camera.position.set(200, 300, 200);
		camera.lookAt(scene.position);

		/**
			创建渲染器
		*/
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(width, height);
		renderer.setClearColor(0xb9dff, 1);
		document.body.appendChild(renderer.domElement);

		//定义渲染函数
		function render() {
			renderer.render(scene, camera);
			requestAnimationFrame(render);
		}

		//创建控件监听鼠标事件
		var controls = new THREE.OrbitControls(camera);