官方文档:
// 初始化一个加载器
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!