Question

我是three.js的新手，我正在网上制作一个增强现实应用程序来展示食物。到目前为止，我已设法显示一个立方体。当我试图在网格中显示一个model.obj而不是几何和材质时，问题就出现了。任何人都可以帮助我如何将model.obj放在THREE.MESH中，因为我不能这样做。以下是我的代码。

 function createContainer() {
    var model = new THREE.Object3D();
    model.matrixAutoUpdate = false;
    return model;
}

function createMarkerMesh(color) {
       manager = new THREE.LoadingManager();
     manager.onProgress = function (item, loaded, total) {

        console.log(item, loaded, total);

    };
     var texture = new THREE.Texture();
     var loader = new THREE.ImageLoader(manager);
     loader.load(texturePath, function (image) {

      texture.image = image;
      texture.needsUpdate = true;
      texture.transparent = true;

    });

    var loader = new THREE.OBJLoader(manager);
    return loader.load(objectPath, function (object) {

        object.traverse(function (child) {

            if (child instanceof THREE.Mesh) {

                child.material.map = texture;
                child.material.transparent = true;

            }

        });
        object.position.z = -50; 

        return object;
    });

   // var geometry = new THREE.CubeGeometry( 100,100,100 );
   //var material = new THREE.MeshPhongMaterial( {color:color, side:THREE.DoubleSide } );
    var mesh = new THREE.Mesh( object.geometry, object.material);                      
    mesh.position.z = -50;

   return mesh;
}



function createMarkerObject(params) {
 //return   createMarkerMesh(params.color);
 var modelContainer = createContainer();
 var modelMesh = createMarkerMesh(params.color);
 console.log(modelMesh);
 modelContainer.add( modelMesh);

    function transform(matrix) {
        modelContainer.transformFromArray( matrix );
    }

    return {
        transform: transform,
        model: modelContainer
    }
  return {
    createMarkerObject:createMarkerObject
}

}

功能创建MArker MEsh中的代码是多维数据集已创建并且工作正常现在我已经评论了这些部分并试图显示对象但没有发生任何事情请帮助我。

Answer 1

在您的代码中尝试此更改...如果出现任何问题，请告诉我..

function createMarkerMesh(color) {
   manager = new THREE.LoadingManager();
   manager.onProgress = function (item, loaded, total) {
   console.log(item, loaded, total);
 };
 var texture = new THREE.Texture();
 var loader = new THREE.ImageLoader(manager);
 loader.load(texturePath, function (image) {

  texture.image = image;
  texture.needsUpdate = true;
  texture.transparent = true;

});
var tmpMesh;
var loader = new THREE.OBJLoader(manager);
loader.load(objectPath, function (object) {
var group = new THREE.Object3D()
object.traverse(function (child) {
    if (child instanceof THREE.Mesh) {
        child.material.map = texture;
    child.material.transparent = true;
        //here in child the geometry and material are available
        var mesh = new THREE.Mesh( child.geometry, child.material);
        //mesh.position.z = -50;
        group.add(mesh);
    }
});
group.position.z = -50;
scene.add(group);//return group;
});
}

Answer 2

最后我找到了这个问题的答案，在这里我将解释上述代码的问题。希望这会有所帮助。

问题是在创建网格之前调用了createMarkerObject，因此object3D容器正在填充空网格。为了安排这个，我已经将modelContainer声明为全局变量并将其插入到createMarkerMesh函数中。在createMarkerObject中，我创建了一个if条件，以便在将modelContainer添加到object3D容器之前检查它是否已满。以下是更新后的代码。

//Loads the model and texture and creates a mesh returns mesh with model
   function createMarkerMesh() {
       manager = new THREE.LoadingManager();
       manager.onProgress = function (item, loaded, total) {
       console.log(item, loaded, total);
    };
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader(manager);
    loader.load(texturePath, function (image) {

    texture.image = image;
    texture.needsUpdate = true;
    texture.transparent = true;

    });
    var tmpMesh, mesh;
    var loader = new THREE.OBJLoader(manager);
    loader.load(objectPath, function (object) {
    tmpMesh = object; //store the object in a variable
    object.traverse(function (child) {
    if (child instanceof THREE.Mesh) {
        child.material.map = texture;
    child.material.transparent = true;
    }
    });

    mesh = new THREE.Mesh( tmpMesh.children[0].geometry, tmpMesh.children[0].material);
    mesh.position.z = -10;
    mesh.scale.set( 3, 3, 0 );
    console.log(mesh);
    modelContainer.add( mesh);
    console.log(modelContainer);
    //return mesh;

      });

      } 



//Creates the position of the object on the marker
 function createMarkerObject() {
 modelContainer = createContainer();
 var modelMesh = createMarkerMesh();
 //console.log(modelMesh);
 if(modelMesh){
 modelContainer.add( modelMesh);
 }
    function transform(matrix) {
     modelContainer.transformFromArray( matrix );
                }

    return {
        transform: transform,
        model: modelContainer
    }
  return {
    createMarkerObject:createMarkerObject
}

}

将model.obj添加到three.MESH

2 个答案: