欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ThreeJS - 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图

程序员文章站 2022-06-11 10:53:08
...

1 动态更换fbx模型的指定纹理贴图

在使用ThreeJS中的FBXLoader的过程中,我们在有的时候只需要Fbx模型的网格信息,而每个网格的纹理我们想自己动态的指定,这在OpenGL中很简单,在ThreeJS同样也是非常简单。

动态更换子mesh中纹理贴图可参考以下代码:

var fbxModelfilepath = './example.fbx';
var fbxLoader = new THREE.FBXLoader();
fbxLoader.load(fbxModelfilepath,function(fbxObject){
	fbxObject.traverse(function(child){
		if(child instanceof THREE.Mesh)
		{
			if(child.name.indexOf("Body") != -1)
			{
				// 如果贴图格式为tga则使用THREE.TGALoader
				// var loader = new THREE.TGALoader();
				// 如果贴图格式为其他普通格式,则使用Three.TextureLoader
				var loader = new Three.TextureLoader();
				loader.load(
                    './Resource/body.png',   // 本地路径的图片
					
                    // 加载完贴图后的回调函数
                    function (texture) {
                        child.material.map = texture;
                        child.material.needsUpdate = true;
                        console.log("身体贴图更新完毕");
                    },

                    // 目前不支持加载贴图过程中的回调函数
                    undefined,

                    // 加载出错时候的回调函数
                    function (err) {
                        console.error('An error happened.');
                    }
                );
				
			}
		}
	});
	
	scene.add(fbxObject);
});

如果需要学习更多的有关计算几何和计算机图形学、以及下载计算几何和计算机图形经典书籍的朋友,大家如果有兴趣可以访问我的个人站:http://www.stubbornhuang.com