Three.js：如何将 3D JSON 模型添加到立方体网格的一个面上答案

【问题标题】：Three.js : How to add a 3D JSON model to one face of the cube's meshThree.js：如何将 3D JSON 模型添加到立方体网格的一个面上
【发布时间】：2020-02-07 01:11:41
【问题描述】：

我正在用 Three.js 开发一个小型原型。我需要将 3D JSON 模型添加到长方体的其中一个面。我可以将 3D 模型加载到场景中，但无法将该模型添加到立方体的特定面。

三个.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

【问题讨论】：

您正在尝试将 3D 模型加载到材质中？您是什么意思“将该模型添加到脸部”？你为什么不改变模型的位置，让它坐在你想要的脸上？然后，您可以使用 THREE.Group 将立方体和卡车组合在一起。
是的，我尝试改变模型的 x、y、z 轴的位置。但是我无法以正确的方式旋转对象以将其与长方体对齐，从而导致模型和长方体都处于不同的位置。你能告诉我如何将它们对齐吗？我将尝试使用 Three.Group 功能。
实际上“将该模型添加到脸部”的意思是，目前我将图像加载到长方体的脸部。我想用 3D 模型替换它。

标签： three.js model 3d load cube

【解决方案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.
        });

    });

在上面的代码sn-p中，首先我们会加载MTL文件然后我们将加载 3D 模型的 OBJ 文件。

接下来我们将旋转和定位对象以将其设置到相应的位置。

【讨论】：