How to properly load a Json File in Threejs

Question

I have done a couple of projects on Blender and decided to display one of them using threejs, however the object doesn't display. What would be the proper way to load a JSON file with keyframe animation?

Here is the specific JSON file that I want to load

and the extract of the code that I'm using:

var mesh;
function initMesh() {
var loader = new THREE.JSONLoader();
loader.load('./ocean.json', function(geometry, materials) {
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
    mesh.scale.x = 0.75;
    mesh.scale.y = 1;
    mesh.scale.z = 0.75;
    scene.add(mesh);
}, undefined, function (e) {console.log('ERROR: ',e )});

show us the rest of your code, do you have a light in your scene? — 2pha
– 2pha, Commented Aug 29, 2017 at 8:06

Goran · Accepted Answer · 2017-08-29 12:29:09Z

1

I would recommend to start with their editor: https://threejs.org/editor/

Here you have GUI where you can import .json, .obj, etc. It is a quick way to see what have you done, you can add lights, play with materials, add custom scripts, etc. For example you can load some example, delete default objects, import your model, press play and if you like what you see just hit publish. It will download entire project which you can upload to your server and that can be the base for future work.

For a quick start it is perfect because it works and will motivate you to investigate and learn further.

I know that this is not direct answer to the question but I've been there and it's frustrating to see all those loaders not working because you didn't select all the right check boxes when exporting from blender or whatever reason (there could be a lot of them).

Try editor first, figure out how it works and move on. Just an advice

answered Aug 29, 2017 at 12:29

Goran

7487 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don McCurdy Over a year ago

+1, great place to start. I personally use the glTF exporter to get models into three.js, and (disclaimer: i wrote it) this drag-and-drop viewer to test them with three.js. This has the advantage of playing animation automatically, which the official editor doesn't currently.

Ashok R · Accepted Answer · 2018-09-23 05:06:32Z

You need to render it.

var scene, camera, renderer, controls;

// create the stats
stats = createStats();
//document.body.appendChild(stats.domElement);

scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(2.5, window.innerWidth / 
window.innerHeight, 1, 1000);


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

//EventListener method Starts...
document.addEventListener('message', function(e) {
    let message = JSON.parse(e.data);
      if(message.type === 'xyz.json' || message.type === 'abc.json' || message.type === 'mno.json') {
        let modelName = `model/${message.type}`
        var objectLoader = new THREE.ObjectLoader();
        objectLoader.load(modelName, function(obj) {
          scene.add(obj);
          render();
          /* if you are using react-native below code is to send even to react-native code else it is not required.
          awaitPostMessage();
          window.postMessage(JSON.stringify({
            type: 'READY_TO_RENDER'
          }), "*");
          */
        });
      }
 });//EventListener method Ends Here...


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

Collectives™ on Stack Overflow

How to properly load a Json File in Threejs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related