首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Three.js :如何将3DJSON模型添加到立方体网格的一个面

Three.js :如何将3DJSON模型添加到立方体网格的一个面
EN

Stack Overflow用户
提问于 2019-10-10 00:29:35
回答 1查看 147关注 0票数 0

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

Three.js脚本

代码语言:javascript
运行
复制
 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中找到

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-24 21:34:44

希望这对某些人有帮助!!

正如@Marquizzo提到的,我们需要根据需要定位/旋转3D对象,以将它们放置在场景中的确切位置。Three.js提供了许多方法来解析不同格式的3D对象,如OBJLoaderGLTFLoader等。

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

代码语言:javascript
运行
复制
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文件。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58308528

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档