在three.js中看不到obj

Question

I have a 3D model that i exported from meshlab and want to load it in three.js like this:

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);
    });
}

But i cannot see the model. I tried changing back ground colors and the color of the mesh, but i'm not sure the object is in the scene.

The camera in Meshlab has the following viewpoint:

<!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>

Do i have to change the settings of my camera?

EDIT: the OBJ file can be found at: https://files.fm/u/e5n2u4dq

More debugging showed that loader.load() is never executed, but i can't figure out what's wrong

Answer 1

There isn't enough information to answer your question, but off the top of my head, I would guess your model is coming in too large.

Try setting doing a mesh.scale.multiplyScalar(0.01) after you set the name, and see if it shows up.

If that doesn't work.. using the chrome debugger, set a breakpoint on the line after you create the mesh, and do a mesh.geometry.computeBoundingBox()... then inspect the mesh.geometry.boundingBox to find the min/max bounds of your mesh. Make sure that that size and centerpoint falls somewhere near zero and size falls within the .near and .far of your camera range. You could automate this centering in code if necessary, but that's a bit complicated. hth!