Visibility of models in Three.js that are loaded via JSON

Question

I have an issue where I load multiple models from JSON files (created from convert_obj_three.py) that I intend to position in space and "assemble" in Three.js, group those items, and then animate the group alone (i.e. I have no need to animate the individual parts of the assembled model after they've been grouped). Everything seems to run fine and I get no errors thrown, but I can't see the grouped object in the camera. I've adjusted my camera settings thinking maybe the object was out of the field of view but haven't had any luck with that avenue. I've also verified that the models in question will individually load fine. Can anyone point me in a direction or possibly a tutorial, code examples, etc that would help me out here? Any advice is greatly appreciated. Here's the JS:

$(function() {
    var group = new THREE.Object3D(),
    renderer = new THREE.WebGLRenderer(),
    scene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000),
    loader = new THREE.JSONLoader(),
    material = new THREE.MeshBasicMaterial({
        color: 0xffffff
    }),
    complete = 0,
    usingPrimitives = true,
    //usingPrimitives = false,
    init = function() {
        camera.position.z = 25;
        if(usingPrimitives) {
            var geometry = new THREE.CubeGeometry(5, 5, 5),
            mesh1 = new THREE.Mesh(geometry, material),
            mesh2 = new THREE.Mesh(geometry, material);
            mesh1.position.x = -10;
            mesh2.position.x = 10;
            group.add(mesh1);
            group.add(mesh2);
            scene.add(group);
        } else {
            loader.load('inner.json', function(geometry) {
                var mesh1 = new THREE.Mesh(geometry, material);
                mesh1.position.x = -10;
                mesh1.scale.set(1, 1, 1);
                group.add(mesh1);
                complete++;
            });

            loader.load('outer.json', function(geometry) {
                var mesh2 = new THREE.Mesh(geometry, material);
                mesh2.position.x = 10;
                mesh2.scale.set(1, 1, 1);
                group.add(mesh2);
                complete++;
            });
            var waitForReadyInterval = setInterval(function() {
                if(complete === 2) {
                    clearInterval(waitForReadyInterval);
                    animate();
                }
            }, 50);
        }
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        animate();
    },
    animate = function() {
        requestAnimationFrame(animate);
        group.rotation.x += 0.01;
        group.rotation.y += 0.02;
        renderer.render(scene, camera);
    };
    init();
});

I created a plunkr for example: http://plnkr.co/edit/fHdyHGNIPIWpl9Gr5BXK?p=preview

Answer 1

You need to add your group to the scene.

scene.add( group );

three.js r.66