JSONLoader not displaying model

问题

So I've taken a class in Three.js only to find out I haven't been educated in how to load models. I found a model on Turbosquid.com <http://storage2.turbosquid.com/Download/index.php?ID=717563_8377529>, and successfully converted it to JSON using convert_obj_three.py.

I've surfed for good code and found a few decent examples on stackoverflow, but for some reason when I run it in chrome, I get no model.

<html>
<head></head>

<body>

    <script src="http://threejs.org/build/three.js"></script>
    <script>

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

        var geometry;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

        loader = new THREE.JSONLoader();

        loader.load( "LeePerrySmith.js", function( geometry ) {

            mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
            mesh.scale.set( 10, 10, 10 );
            mesh.position.y = 0;
            mesh.position.x = 0;
            mesh.scale.set( 100, 100, 100 );
            scene.add( mesh );
            mesh.side = THREE.DoubleSide;
            alert("hit");

            } );


        camera.position.z = 5;

        var render = function () {
            renderer.render(scene, camera);
        };

        render();

    </script>
</body>

I am storing both the HTML file and the e100.js model file in the same directory. Is there some pathing that I am not aware of?

回答1:

well I've tested your code here with a simple cube I exported as a js file and it works fine. Initially I'd suspect 3 things:

1) Perhaps the mesh is super tiny and your not able to see it, try a mesh.scale.set( 100, 100, 100 ); see if that changes anything. OR reduce your camera's z position to "move in" a bit.

2) The pathing looks fine, you could use a relative path like "./e100.js" if you wanted to be extra sure, but it really isn't necessary.

3) Maybe the mesh has inverted normals, or some other flaw. Just for testing you could try setting your mesh to render a texture on both sides to see if that's the issue like so:

mesh.side = THREE.DoubleSide;

OR you could try a more rudimentary material like MeshBasicMaterial in lieu or your Normal version and see if that helps.

Keep your console open while the model is loading, look for any errors as it does. If none of this works I'd suspect the model, but that's jumping the gun at this point.

Happy hunting,

Edit: cube.js

{
"metadata" :
{
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.66 Exporter",
"vertices" : 8,
"faces" : 6,
"normals" : 8,
"colors" : 0,
"uvs" : [24],
"materials" : 1,
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
"materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorSpecular" : [0.5, 0.5, 0.5],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "cube.png",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Phong",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],
"vertices" : [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
"morphTargets" : [],
"normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
"colors" : [],
"uvs" : [[0.33408,0.333114,0.334191,0.659296,0.009852,0.659305,0.009721,0.333137,0.991035,0.334072,0.663423,0.334025,0.663036,0.005624,0.991002,0.005943,0.991246,0.333487,0.991261,0.6585,0.663173,0.658447,0.662825,0.334005,0.662568,0.33421,0.662689,0.65851,0.335127,0.658476,0.335112,0.333952,0.335825,0.007042,0.335835,0.333228,0.008133,0.333306,0.008138,0.006861,0.335761,0.333299,0.335071,0.005883,0.663081,0.006277,0.663095,0.333865]],
"faces" : [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,4,5,6,7,4,5,6,7,43,0,4,5,1,0,8,9,10,11,0,4,7,1,43,1,5,6,2,0,12,13,14,15,1,7,6,2,43,2,6,7,3,0,16,17,18,19,2,6,5,3,43,4,0,3,7,0,20,21,22,23,4,0,3,5],
"bones" : [],
"skinIndices" : [],
"skinWeights" : [],
"animation" : {}
}

来源：https://stackoverflow.com/questions/18445119/jsonloader-not-displaying-model

标签

json

three.js