CODEWITHSUNDEEP
javascriptthree.js3d-model
Pedro
Pedro

Reputation: 41

Can´t load js model in THREE JS

I have this code below and can´t seem to load the model.

loader = new THREE.JSONLoader(true);
                    loader.load("modelo.js" , function ( geometry, materials) {
                        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
                        scene.add( mesh );
                    } );

The entire code is below. If i take the out the line "loader.load(...)" it works fine and loads a small cube rotating as in the example from the tutorial in threejs.org, but when i try to load my model it doesn´t load anything. I watch a lot of examples and make this in different ways but it just doesn´t load.

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 geometry = new THREE.CubeGeometry(1,1,1);
                    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
                    var cube = new THREE.Mesh(geometry, material);
                    scene.add(cube);

                    camera.position.z = 5;

                    loader = new THREE.JSONLoader(true);
                    loader.load("modelo.js" , function ( geometry, materials) {
                        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
                        scene.add( mesh );
                    } );

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

                        cube.rotation.x += 0.1;
                        cube.rotation.y += 0.1;

                        renderer.render(scene, camera);
                    };

                    render();

Upvotes: 0

Views: 2155

Answers (1)

Darryl_Lehmann
Darryl_Lehmann

Reputation: 2198

Good day, I've tested your code with r61 of the Three.js library. It works fine, here's my suggestions.

First try adding a light source to your scene. If for example your background is black and you load a model (even with a texture) that is unlit, it will be black on black. So:

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

If that doesn't work have a look at some of the material values in the modelo.js file specifically the colorDiffuse value in the model's json is set to black (or matches your scenes background color). Did you at anytime have this in Maya? No matter, you've said you have tried a few models so that's a long shot anyway, but if it helps check out this post:

Loading Maya model with Three.js

Next, are you running this locally? If so are you running it in Chrome and have you set the chrome.exe --allow-file-access-from-files flag. If not try it in Firefox, it should just work.

Oh also check that (a) your camera isn't too close. Maybe move it back to say:

camera.position.z = 100;

or (b) your mesh is big enough to see:

mesh.scale.set(100, 100, 100);

That should do it, good luck

Upvotes: 1

Related Questions