0

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?

Improve this question

1 Answer 1

Reset to default
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" : {}
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Well I tried all four suggestions and I still don't have any idea what's wrong. I'm working the code in Notepad++, and all that I can identify is that the GET is throwing an error on my src="three.min.js" call and that subsequently THREE is not defined. Should I be using the .prototype?
So I managed to get the code to run uninhibited in the console, but still, no result.
That is unfortunate, have you tried another model file? I'll edit my answer to have a simple cube.js file's contents, perhaps the model file is the culprit?
I tried using the LeePerry.js file from the Three.js master file, as recommended by Mrdoob in another post. So apparently it's not the model.
Yikes, this one is tricky. So the code you put up works fine, the model has been eliminated, is there any other quirk with your setup that might be the culprit? Bad video driver (do the Three.js examples work?) What about the "three.min.js" file reference, can you try this instead "https://raw.github.com/mrdoob/three.js/master/build/three.min.js" and see if that helps?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.