Three.js 不显示搅拌机模型答案

【问题标题】：Three.js doesn't display blender modelThree.js 不显示搅拌机模型
【发布时间】：2015-10-03 15:26:38
【问题描述】：

我已经导出了我之前使用三个.js 提供的插件制作的简单搅拌机模型，该插件创建了一个 .json 文件。然后我尝试将该文件导入到我的项目中，但完全没有成功。

我将它放在本地服务器上，因为不允许通过 file:// 进行文件传输，因此，我使用的是 HTTP。

问题是我看不到模型。我正在使用以下代码来导入它：

    var loader = new THREE.JSONLoader();
    loader.load( 'model/mountain.json', function ( geometry ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
    scene.add( mesh );

 });

我已经正确设置了相机和场景，因为我可以创建和添加原生 three.js 形状，例如盒子和平原，而且我 100% 确定文件位于正确的位置。

【问题讨论】：

标签： javascript html three.js blender

【解决方案1】：

我在 reddit 上问过，/u/Egenimo 帮我解答了！

这是整个代码，我认为它可能对需要设置场景的人也有帮助。

    var canvas = document.getElementById("bgcanvas"),
renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true }),
windowHeight = window.innerHeight,
windowWidth = window.innerWidth,


camera, scene, renderer, loader;

init();

function init() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);


    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 5;

    // scene
    scene = new THREE.Scene();


    loader = new THREE.JSONLoader();  
    loader.load( 'cube.json', function ( geometry ) {  
        var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({overdraw: true}));  
        scene.add( mesh );
    });  

    console.log(scene.children.length);
    render();
}
function render() {
        requestAnimationFrame(function() {
            render();
        });
    renderer.render(scene, camera);
}

然后我遇到了一个更复杂的模型的问题，有几个对象，ThreeJS 只会导入一个，因此，在查找之后，我找到了 the Man himself! 的答案。

希望对有需要的人有所帮助！

【讨论】：