Three.js不顯示攪拌器模型

Question

我已經導出了一個先前使用Three.js提供的插件制作的簡單化的Blender模型，該插件創建了一個.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％確信文件位於正確的位置。

Answer 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只導入一個模型，因此，在查找之后，我自己找到了這個答案！ 。

希望這可以幫助需要幫助的人！