在 three.js 中看不到 obj

Posted

技术标签:

【中文标题】在 three.js 中看不到 obj【英文标题】:can't see obj in three.js 【发布时间】:2018-11-18 22:32:46 【问题描述】:

我有一个从 meshlab 导出的 3D 模型,并希望像这样在 three.js 中加载它:

var scene = new three.Scene();
scene.background = new THREE.Color( 0xffffff );
var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new three.WebGLRenderer( alpha: true );
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
var mesh = null;
var material = new THREE.MeshBasicMaterial(color: 'yellow', side: THREE.DoubleSide);
function initMesh() 
    var loader = new THREE.OBJLoader();
    loader.load('merged.obj', function(obj) 

        obj.traverse(function (child) 

            if (child instanceof THREE.Mesh) 
                child.material = material;
            

        );
    mesh = new THREE.Mesh(obj);
    mesh.name = 'mesh1';
    scene.add(mesh);
    );

但我看不到模型。我尝试更改背景颜色和网格的颜色,但我不确定对象是否在场景中。

Meshlab中的相机有如下视点:

<!DOCTYPE ViewState>
<project>
 <VCGCamera TranslationVector="13.2236 38.6958 -15.7741 1" 
LensDistortion="0 0" ViewportPx="1280 611" PixelSizeMm="0.0369161 
0.0369161" CenterPx="640 305" FocalMm="19.5338" 
RotationMatrix="0.86925 -0.494334 0.00615375 0 -0.0132438 -0.0108413 
0.999853 0 -0.494195 -0.869204 -0.0159706 0 0 0 0 1 "/>
 <ViewSettings NearPlane="1.03109" TrackScale="0.0390212" 
FarPlane="13.0311"/>
 <Render Lighting="0" DoubleSideLighting="0" SelectedVert="0" 
ColorMode="3" SelectedFace="0" BackFaceCull="0" FancyLighting="0" 
DrawMode="2" TextureMode="0"/>
</project>

我必须更改相机的设置吗?

编辑: 可以在以下位置找到 OBJ 文件:https://files.fm/u/e5n2u4dq

更多调试表明 loader.load() 从未执行过,但我不知道出了什么问题

【问题讨论】:

你能在这个帖子中分享OBJ文件吗? 【参考方案1】:

没有足够的信息来回答你的问题,但我想你的模型太大了。

在设置名称后尝试设置做一个 mesh.scale.multiplyScalar(0.01),看看它是否显示出来。

如果这不起作用.. 使用 chrome 调试器,在创建网格后在行上设置断点,然后执行 mesh.geometry.computeBoundingBox()... 然后检查 mesh.geometry.boundingBox找到网格的最小/最大边界。确保该大小和中心点位于接近零的某个位置,并且大小位于您的相机范围的 .near 和 .far 范围内。如有必要,您可以在代码中自动进行这种居中,但这有点复杂。 hth!

【讨论】:

以上是关于在 three.js 中看不到 obj的主要内容,如果未能解决你的问题,请参考以下文章

three.js 加载具有多个可点击点的 .obj 文件

如何在 Three.js 中加载 .obj 3D 模型?

如何在 TypeScript 中使用 three.js 加载 OBJ 模型

three.js obj模型如何转成json 给threejs使用啊

创建自定义 .OBJ / .MTL 文件并使用 three.js 进行渲染

为啥我不能让这个 3D 模型 (.obj) 显示在屏幕上?