通过 JSON 加载的 Three.js 中模型的可见性答案

【问题标题】：Visibility of models in Three.js that are loaded via JSON通过 JSON 加载的 Three.js 中模型的可见性
【发布时间】：2014-04-23 19:12:22
【问题描述】：

我有一个问题，我从 JSON 文件（从 convert_obj_three.py 创建）加载多个模型，我打算在空间中定位并在 Three.js 中“组装”，对这些项目进行分组，然后单独为该组设置动画（即在组装模型的各个部分分组后，我无需为它们设置动画）。一切似乎都运行良好，我没有抛出任何错误，但我看不到相机中的分组对象。我已经调整了我的相机设置，以为物体可能不在视野范围内，但在这条道路上没有任何运气。我还验证了有问题的模型可以单独加载。任何人都可以指出一个方向或可能的教程，代码示例等可以帮助我吗？任何意见是极大的赞赏。这是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();
});

我创建了一个 plunkr 例如：http://plnkr.co/edit/fHdyHGNIPIWpl9Gr5BXK?p=preview

【问题讨论】：

标签： json 3d three.js

【解决方案1】：

您需要将您的group 添加到scene。

scene.add( group );

three.js r.66

【讨论】：