Importing blender JSON in Three.js

870 views Asked by At

Hi I am having problems importing models from blender in three.js.

At this moment I am using the last version of three.js (R71). I installed the exporter of three.js in blender and exports fine.

This is the code of HTML.

<body>
    <font size="+6"><b>TFG</b></font><br>
    <a href="../index.html">Volver a atrĂ¡s</a>
    <hr>
    <div id='container'></div>      
    <script src="libs/ThreeJSV71/build/three.min.js"></script>
    <script src="libs/OrbitControls.js"></script>
    <script src="libs/Coordinates.js"></script>
    <script src="libs/dat.gui.min.js"></script>
    <script src="libs/stats.min.js"></script>   
    <script src="libs/ColladaLoader.js"></script>   

    <script src="threejs/tfg2.js"></script>
    <br>
</body>

The next file is the tfg2.js where I load the model.

var width = window.innerWitdh,
    height = window.innerHeight,
    clock = new THREE.Clock(),
    scene,
    camera,
    renderer,
    ambientLight,
    directionalLight,
    loader,
    modelo = new THREE.Object3D();

init();
function init()
{
    scene =new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, width/height, 1000);
    camera.position.set(0,1,5);

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(width,height); 
    renderer.setClearColor(new THREE.Color(0x0000AA));
    document.getElementById('container').appendChild(renderer.domElement);

    ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);

    directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0,1,0);
    scene.add(directionalLight);

    scene.add(new THREE.GridHelper(10,1));
    loader = new THREE.JSONLoader();
    loader.load('blender/json/camara.json', function(geometry,materials)
    {
        modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        scene.add(modelo);
    });
}

When I try to see the results, nothing appear in the webpage and also de JavaScript console don't show any error. If I export the model with collada format and another .js that I have, I can see the model but I need use JSON.

What I am doing wrong?EDIT:

Added: modelo.position.set(0,0,0) inside the callback to be sure that the model is in origin.

1

There are 1 answers

3
Ajit kohir On BEST ANSWER

Since there are no error what you can do:

  1. While exporting the object from blender translate the object to origin. Go to origin>> select origin to geometry>> translate object to x, y, z to zero. Now your camera see @ position 0,1,5 xyz respectivily Probably where your object camera is not looking

  2. Or translate the child of scene to origin

Probably this solve your issue. As I see there are no error and warning in log.