Threejs入门进阶实战案例(1)：使用TextureLoader进行map贴图显示黑色的解决方案

<!--
@author Poleng
@email 30930572@qq.com
@create date 2020-06-28
@desc A 3D project based on three.r118.js.
-->

官方文档：

// 初始化一个加载器
var loader = new THREE.TextureLoader();

// 加载一个资源
loader.load(
	// 资源URL
	'textures/land_ocean_ice_cloud_2048.jpg',

	// onLoad回调
	function ( texture ) {
		// in this example we create the material when the texture is loaded
		var material = new THREE.MeshBasicMaterial( {
			map: texture
		 } );
	},
	// 目前暂不支持onProgress的回调
	undefined,
	// onError回调
	function ( err ) {
		console.error( 'An error happened.' );
	}
);

TextureLoader()，是异步加载，按照官方文档，是显示不出来贴图的。正确的做法是：贴图后需要再次渲染才能显现出来。

解决方案：

    //加载贴图图片;
    var texture = new THREE.TextureLoader().load("images/texture/part1.jpg", function () {
                renderer.render(scene, camera);
            }
    );
    //创建网格;
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.MeshBasicMaterial({
        map: texture,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

Done！