0

i have this code:

var camera, scene, controls, renderer;

            init();
            animate();

            function init() {
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);

                camera.position.z = 10;

                //lights
                var light = new THREE.DirectionalLight(0xffffff, 1);
                light.position.set(10, 10, 10);
                scene.add(light);


                controls = new THREE.OrbitControls(camera);
                controls.addEventListener('change', render);

                renderer = new THREE.WebGLRenderer({alpha: true});
                renderer.setClearColor(0x000000, 0); // the default
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);

                var jsonLoader = new THREE.JSONLoader();
                var mesh;
                jsonLoader.load('corona.js',
                        function (geometry, materials) {

                            console.log(JSON.stringify(materials));
                            console.log(JSON.stringify(geometry));

                            var material = new THREE.MeshFaceMaterial(materials);
                            mesh = new THREE.Mesh(geometry, material);

                            scene.add(mesh);

                        }
                );

            }

            function animate() {

                requestAnimationFrame(animate);
                controls.update();

                render();
            }

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

Like you can see i am using JSONLoader to show a Corona beer, but for some reason it is not showing anything. You can take a look at the live code here http://xsportfit.com/corona/index.html These is a list of the files i used for this example:

- http://xsportfit.com/corona/corona.obj
- http://xsportfit.com/corona/corona.mtl
- http://xsportfit.com/corona/corona.js

I have used convert_obj_three.py script to convert corona.obj into corona.js file

Silvestre Alejandro Terrazas M
  • 5
  • 4

1 Answers1

0

Something is wrong in the JSON. You can have it displayed by directly writing your material. For example 

new THREE.MeshLambertMaterial({
    color:0xffffff,
    map:THREE.ImageUtils.loadTexture('BotellaText.jpg')
});

result

Mouloud85
  • 3,826
  • 5
  • 22
  • 42
  • Hello @Atrahasis thanks for the help until now. This is the value of material: [{"metadata":{"version":4.2,"type":"material","generator":"MaterialExporter"},"uuid":"EEDF478C-76E9-4CCD-8585-32DDE8C7FEA4","type":"MeshLambertMaterial","name":"01___Default","color":9803157,"emissive":0,"opacity":0,"transparent":true}]. Do you think convert_obj_three.py is converting .obj to .js(JSON) wrong? – Silvestre Alejandro Terrazas M Aug 25 '15 at 18:53
  • After your comment i thought i wrote mistakes about the json so i editted the post. however i read the data again and we don't seem to read the same file. The json used is not what you describe, it has no `type` field as originally mentionned. – Mouloud85 Aug 25 '15 at 19:03
  • Right, it prints a different data in console so may be that is the problem. I have this metadata in corona.js file :
    "metadata" : { "formatVersion" : 3.1, "sourceFile" : "Corona.obj", "generatedBy" : "OBJConverter", "vertices" : 2662, "faces" : 2576, "normals" : 0, "colors" : 0, "uvs" : 2754, "materials" : 1 },
    very different to the showed in console.     – Silvestre Alejandro Terrazas M Aug 25 '15 at 19:42
  • that is the problem it is reading metadata totally different to what i have in .js(JSON) file. Any idea why? – Silvestre Alejandro Terrazas M Aug 25 '15 at 19:49
  • Metadata are developper information, they are almost not parsed in the `JSONLoader`. I've never used the .obj => .json converter so i cannot answer your last question. If you are sure there is a problem with the converter, then there probably is an open github issue about it, just check that. To answer your original post i'm sure that the `THREE.JSONLoader` has not enough information from the JSON at 'http://xsportfit.com/corona/corona.js'. But with few lines like those i wrote, you have a solution. – Mouloud85 Aug 25 '15 at 21:47