Three.js：如何将3D JSON模型添加到多维数据集网格的一面

Question

我正在Three.js中制作一个小型原型。我需要将3D JSON模型添加到长方体的一面。我可以将3D模型加载到场景中，但无法将该模型添加到多维数据集的特定面上。

Three.js脚本

 boxGeometry = new THREE.BoxGeometry(25, 25, 90, 7, 7, 7);
    var material = [
      new THREE.MeshBasicMaterial({ color: "#000000", wireframe:true}),
      new THREE.MeshBasicMaterial({ color: "#000000", wireframe:true}),
      new THREE.MeshBasicMaterial({ color: "#000000", wireframe:true}),
      new THREE.MeshBasicMaterial({ color: "#666699", wireframe:false}),
      // load 3D truck model to the mesh here, instead of the image
      new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'https://raw.githubusercontent.com/SatheeshKS10/MockRest/master/truck-front.png'), wireframe:false } ),
      new THREE.MeshBasicMaterial({ color: "#000000", wireframe:true})
  ];

可以找到完整的代码here

Answer 1

希望这对某些人有帮助！

正如@Marquizzo所述，我们需要根据需要定位/旋转3D对象，以将其放置在场景中的确切位置上。 Three.js提供了许多方法来解析3D对象的不同格式，例如-OBJLoader，GLTFLoader等。>

下面是使用OBJ加载器的简单示例。

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/resources/');
mtlLoader.setPath('/resources/');
mtlLoader.load('3DModel.mtl', function(materials) { // this is optional to load material files !!
                                                    //  we can skip this if we have only obj files for our 3D model
var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/resources/');
        objLoader.load('3DModel.obj', function(object3) {
            object3.rotation.set(3.15, 1.55, 0);
            object3.position.y = -25;
            object3.position.z = 10; 
            object3.position.x = 0; 
            scene.add(object3);     // Object is added to the scene.
        });

    });
在上面的代码片段中，首先我们将加载MTL文件然后我们将加载3D模型的OBJ文件。 

接下来，我们将旋转并定位对象，将其设置为相应的位置。