How to properly load a Json File in Threejs

问题

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 )});

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

回答2:

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);
}

来源：https://stackoverflow.com/questions/45930473/how-to-properly-load-a-json-file-in-threejs

标签

javascript

json

three.js

blender