您当前的位置: 首页 > 

漏刻有时

暂无认证

  • 0浏览

    0关注

    717博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

漏刻有时 发布时间:2020-06-28 14:26:13 ,浏览量:0

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述


官方文档:

// 初始化一个加载器
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!

关注
打赏
1661217259
查看更多评论
立即登录/注册

微信扫码登录

0.0799s