javascript - How to load json models in three.js properly?

I'm having a hard time loading JSON models in three.js. I'v made a very simple tube-like model and textured it in blender. The issue is that whenever i try to load the json model in three.js, the vertexes looks weird.

I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code.

EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender?

<html>
<head>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="threejs/three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.JSONLoader();
        loader.load( "models/test.js", modelToScene );


        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);

        var light = new THREE.PointLight( 0xFFFFDD );
        light.position.set( -15, 10, 15 );
        scene.add( light );

        function modelToScene( geometry, materials ) {
            var material = new THREE.MeshFaceMaterial( materials );
            obj = new THREE.Mesh( geometry, material );
            obj.scale.set(1,1,1);
            scene.add( obj );

        }

        camera.position.z = 5;
        camera.position.y = 1;

        var render = function () {
            requestAnimationFrame(render);

            obj.rotation.y += 0.01;
            obj.rotation.x += 0.02;

            renderer.render(scene, camera);
        };

        render();
    </script>
</body>

any help will be appreciated.

Thanks, Jukka Korhonen

I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code.

EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender?

<html>
<head>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="threejs/three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.JSONLoader();
        loader.load( "models/test.js", modelToScene );


        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);

        var light = new THREE.PointLight( 0xFFFFDD );
        light.position.set( -15, 10, 15 );
        scene.add( light );

        function modelToScene( geometry, materials ) {
            var material = new THREE.MeshFaceMaterial( materials );
            obj = new THREE.Mesh( geometry, material );
            obj.scale.set(1,1,1);
            scene.add( obj );

        }

        camera.position.z = 5;
        camera.position.y = 1;

        var render = function () {
            requestAnimationFrame(render);

            obj.rotation.y += 0.01;
            obj.rotation.x += 0.02;

            renderer.render(scene, camera);
        };

        render();
    </script>
</body>

any help will be appreciated.

Thanks, Jukka Korhonen

Share Improve this question edited Aug 8, 2014 at 6:19 joshua 6841 gold badge5 silver badges20 bronze badges asked Jun 14, 2013 at 8:14 eljuko 1552 silver badges12 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

I have made some brutal mistakes exporting JSON models. For all those who'r having issues with exporting from Blender. I suggest you to check out your exporting settings.

for me, it worked with following setup;

geometry: Vertices: check, Faces: check, normals: check, skinning: check

Materials: check all

Settings: Flip YZ: check

Animation: Morph animation

and all mehses: check

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to load json models in three.js properly? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)