Threejs入門進階實戰案例(1)：使用TextureLoader進行map貼圖顯示黑色的解決方案

<!--
@author Poleng
@email [e-mail]
@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！