Question

我正在学习threejs，我希望我的立方体每侧有6种不同的纹理。我确实使用loadTexture

var material3 = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture('textures/ps.png')} );

我确实在数组中保存了6个这样的材料然后使用THREE.MeshFaceMaterial。但是THREE.ImageUtils.loadTexture存在问题，因为它已被弃用，我应该使用THREE.TextureLoader，我不知道如何以这种方式加载6个纹理。

这就是我所拥有的：

function texture()
{
    var loader = new THREE.TextureLoader();
    loader.load( 'textures/ps.png', function ( texture )
    {
        var geometry = new THREE.CubeGeometry( 10, 10, 10 );

        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
        mesh = new THREE.Mesh( geometry, material );
        mesh.position.z = -50;

        scene.add( mesh );
    } );
}

Answer 1

我认为这与您正在寻找的内容非常接近：

function MultiLoader(TexturesToLoad, LastCall, ReturnObjects) {
        if (TexturesToLoad.length == 0) return;
        if (!ReturnObjects) ReturnObjects = [];
        var loader = new THREE.TextureLoader()
        //Pop off the latest in the , 
        //you could use shift instead if you want to read the array from 
        var texture = TexturesToLoad.shift()

        loader.load(texture,

        function (texture) {
            ReturnObjects.push(texture);
            if (TexturesToLoad.length > 0) {
                MultiLoader(TexturesToLoad, LastCall, ReturnObjects)
            } else {

                LastCall(ReturnObjects)
            }

        },
        LoadProgress,
        LoadError);
    }

    function LoadProgress(xhr) {
        console.log(('Lodaing  ' + xhr.loaded / xhr.total * 100) + '% loaded ');
    }

    function LoadError(xhr) {
        console.log('An error happened  ');
    }

用这个

来称呼它

var TexturesToLoad = []
TexturesToLoad.push("../surfacemap.jpg")
TexturesToLoad.push("../normalmap.jpg");
TexturesToLoad.push("../spekularmap.jpg");
    var ReturnedMaterials=[];
    var ReturnMaterials=[];



    var LastCall=function(ReturnedMaterials)
    {
            var surfaceMap =  ReturnedMaterials[0];        
            var normalMap =   ReturnedMaterials[1];                    
            var specularMap = ReturnedMaterials[2];         

            var decalMaterial = new THREE.MeshPhongMaterial( 
            {           
                map: surfaceMap,
                normalMap: normalMap,
                normalScale: new THREE.Vector2( 1, 1 ),
                specularMap: specularMap,
                transparent:false,  
                wireframe: false 
            } );

        var globeGeometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);            
        mesh = new THREE.Mesh( globeGeometry, decalMaterial ); 
        mesh.rotation.x=Math.PI/2;


    };

    MultiLoader(TexturesToLoad,LastCall,ReturnMaterials)

说明：新的THREE.TextureLoader使用回调函数。这可以确保在您需要添加时正确加载您正在使用的资源。但是，如果你想使用大量材料，回调很困难。 MultiLoader上方允许您以递归方式调用，然后回调您想要使用所有材料的函数。材料被收集到一个数组中（ReturnObjects）。

Answer 2

有很多方法可以实现它。我会告诉你2;

1）使用自己的顶点和面

制作对象（立方体）

.vertices.push( new THREE.Vector3( x, y, z ) );
.faces.push( new THREE.Face3( x, y, z ) );

I've prepared an example in jsfiddle

2）使用UV贴图。首先，您需要在Blender等3D软件中使用UV贴图准备对象，并将其导出为JSON文件。

I've also prepared an example in jsfiddle

If you are not familiar with UV map or Blender, check toturials

Threejs TextureLoader CubeGeometry

2 个答案: