简体   繁体   中英

Three.js doesn't display blender model

I've exported a simplistic blender model I made earlier with the plugin provided by three.js, which created a .json file. I then tried to import that file into my project, but am having no success at all.

I have it on a local server, because of file transfers not being allowed through file://, therefore, I'm using HTTP.

The issue is that I cannot see the model. I'm using the following code to import it:

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

 }); 

I have both camera and scenes setup properly because I can create and add native three.js shapes, such as boxes and plains, and I'm 100% sure the file is in the correct place.

I asked on reddit, and /u/Egenimo helped me with the answer!

Here's the whole code, as I figure it might help people who need to set up a scene aswell.

    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);
}

I then ran into the issue of having a more complex model, with several objects, and ThreeJS would only import a single one, therefore, after looking it up, I found this answer by the Man himself! .

Hope this helps someone in need!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM