CODEWITHSUNDEEP
jsonimportthree.js
gustable
gustable

Reputation: 29

Importing a JSON model into Three.js - Nothing showing

I'm using the following code and have been through the posts and definitely all the wiki and so forth. No matter what .js JSON object I use, nothing appears in the browser window. There are no flags in the browser console and I am prepared to run locally. What is missing/done wrong?

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

NEW CODE

<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 material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var mesh = new THREE.Mesh( geometry, material );

    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");
        render();

        } );


    camera.position.z = 1000;

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

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



</script>

Upvotes: 0

Views: 2919

Answers (1)

WestLangley
WestLangley

Reputation: 104763

Loading is asynchronous. That is why you have a callback function. You are calling render() before the model loads.

  1. Move render() to the last line of the callback function. Or do what most users do and add an animation loop.

  2. Move you camera back to z = 1000. It may be inside the model.

  3. You are not using your originial red material. Do this: `var mesh = new THREE.Mesh( geometry, material );

  4. side is a property of material, not mesh: set mesh.material.side = THREE.DoubleSide, if you feel you need that.

Upvotes: 1

Related Questions