0

So I am trying to get a JSONLoader to work from threejs.org

Three.js is working for sure because I have no problem creating a cube. But when I try to load a js file throuh JSONLoader then nothing happens. 

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene();
            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 );

            // instantiate a loader
            var loader = new THREE.JSONLoader();

            // load a resource
            loader.load(
                // resource URL
                'logo.js',
                // Function when resource is loaded
                function ( geometry, materials ) {
                    var material = new THREE.MultiMaterial( materials );
                    var object = new THREE.Mesh( geometry, material );
                    scene.add( object );
                }
            );

            camera.position.z = 5;

            var render = function () {
                renderer.setClearColor( 0x000000, 0 );
                requestAnimationFrame( render );
                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

As mentioned in the title then the code is copy pasted from threejs own website and should be working.

Can someone help me figure what is going wrong?

here is a fiddle with the script of logo.js https://jsfiddle.net/380z6096/

the object has been exported from 3ds max with the 3ds Max JSExporter

I am using xampp and chrome.

Nulle
  • 1,301
  • 13
  • 28
  • (1) Set the clear color outside of the render loop. (2) Set `alpha: true` only if you want a transparent background to your scene. – WestLangley Mar 20 '16 at 21:32
  • sorry didn't change anything. and I want background to be transparent – Nulle Mar 21 '16 at 10:30

1 Answers1

0

Your camera is inside your geometry.

You can determine the dimensions of your geometry like so

geometry.computeBoundingSphere();
console.log( geometry.boundingSphere );

or

geometry.computeBoundingBox();
console.log( geometry.boundingBox );

Scale your geometry

object.scale.multiplyScalar( 0.01 );

Or move your camera back.

three.js r.75

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • can you take it down another norch for a newbie? Where should i put my camera if not where it is now? – Nulle Mar 21 '16 at 10:33
  • 1
    (1) The camera must be outside the geometry. (2) Your bird model is fine. (3) The material loaded from the model is `MeshLambertMaterial`, which requires scene lights. You have none, so the model is rendering black on a black background. – WestLangley Mar 21 '16 at 15:22
  • Yeah well it doens't work and i kinda have given up on this subject. – Nulle Apr 10 '16 at 12:07