Importing model into three.js - performance

Question

Is there a good/recommended approach regarding performance to load a 3D model from file to be used in a three.js JavaScript application (especially where the model is genera

Answer 1

I've had some experience with this kind of problem. The issue here is that you model most likely has a lot of points/polygons. So no matter what format you use every point and face of your model has to be described. This ensures a large file size and there is no way around it.

My solution was to look at Blender rather than Three.js and optimise my models. There are a ton of posts on this topic (e.g. here, here, and here). After learning more about how Blender works, I was able to reduce most of my 4-8 Mb meshes down to < 200kb each without noticable degradation to the objects rendered in the browser.

Answer 2

With the current Blender Three.js exporter (as of writing this I am referring to the r71 dev version) there are a few things you can do:

• dial down the precision values, the short the float value precision the smaller the file
• uncheck Indent, this is huge on animation files as it removes white spaces and \n characters
• experiment with using msgpack compression (requires the mspack package be installed) msgpack loading example

at some point, tho, the JSON format may not be the most ideal and maybe other formats will work better for you. As previous posts stated; model optimization goes a long ways too.

Answer 3

I saw your comment on my question and I can confirm I used Blender 2.68a. To load from openctm format I did:

var loader = new THREE.CTMLoader();
...
loader.load( 'models/basic_model.ctm',  function( geometry, material ){
    // create mesh and position it
    var material = new THREE.MeshPhongMaterial({ color: 0xEEEEEE, shininess: 100, side: THREE.DoubleSide }),
        mesh = new THREE.Mesh( geometry, material );
    // Faces have an orientation that orientation decides which side is which. And the culling removes the backside in normal circumstances

    mesh.position = position;
    mesh.scale.set( 30, 30, 30 );

    // render
    scene.add( mesh );
    render();

    meshes[ 'basic_model' ] = mesh;
}, {} );

You need to export from Blender using the openctm export plugin and to include js-openctm in your project. Don't remember more details, as I'm working on completely different stuff now.

PS: I'm pretty sure I had to manually load the openctm plugin into Blender for it to work