How to load json models in three.js properly?

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

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 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

Related

TextGeometry not displaying, Could anyone tell me why?

I have the following Three.js code:
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/optimer_regular.typeface.js"></script>
<script>
//Basic Three components
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 );
//Let´s add a cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
//Let´s add a text
var material2 = new THREE.MeshPhongMaterial({
color: 0x00ff00
});
var textGeom = new THREE.TextGeometry( 'Sitescope', {
font: 'optimer',
weight: 'normal'
});
var textMesh = new THREE.Mesh( textGeom, material2 );
scene.add( textMesh );
//Render scene
function render() {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
render();
</script>
</body>
When i run my code, My cube renders well but my text does not appear anywhere.
The only output that i get in the javascript console is:
THREE.WebGLRenderer 69.
Could anyone tell me why my text does not appear? (I am a beginner in Three.js) Thanks!

When using a THREE.MeshPhongMaterial() you need a light in the scene. Otherwise the model will come out black. If your scene background is also black you will never know if the model was drawn or not. Take a look at this fiddle. I am using THREE.MeshNormalMaterial(). Replace it with PhongMaterial to see what I am talking about. You can see the text is being drawn with black color just because it is over the green cube.

How to use a variable from one js file in another file?

I have a basic cube scene with Three.js
Now I want the camera to move with perlin noise. So I downloaded this Perlin noise library and pasted it next to the other libraries:
https://github.com/josephg/noisejs
I also linked added the script in the html :
<script src="three.min.js"></script>
<script src="my-three.js"></script>
<script src="perlin.js"></script>
Then i want to use the noise, so i created a variable at the end of the perlin.js file, like this :
var ruido = noise.simplex3(10, 10, 1);
Last step would be to use this variable in the camera, so in my "my-three.js" file i added this line:
camera.position.z = ruido;
But i get a :
Uncaught ReferenceError: ruido is not defined
Somehow the variable is not being received in the "my-three.js" file.
The full "my-three.js" file is:
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.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = ruido;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.001;
cube.rotation.y += 0.001;
renderer.render(scene, camera);
};
render();
Thanks in advance.

You should include the perlin.js file before the my-three.js file, since the my-three.js is depended on the perlin.js file.
<script src="perlin.js"></script>
<script src="my-three.js"></script>

You can use AMD (Asynchronous Module Definition) approach and libraries that implements it.
https://github.com/amdjs/amdjs-api/blob/master/AMD.md
It solves this and many similar problems with variables, modules, its dependencies and so on.

3D model rotation on HTML with JS

Referring to this video, I can't seem to see the cube which is supposed to be here.
Code causes these 2 errors:
DEPRECATED: THREE.CubeGeometry is deprecated. Use THREE.BoxGeometry instead. three.min.js:634
Uncaught ReferenceError: materials is not defined
Code:
<title>My first three.js app</title>
</head>
<body>
<script src="C:\Users\123303G\Desktop\Webpage\three.min.js"></script>
<script src="C:\Users\123303G\Desktop\Webpage\TrackballControls.js"></script>
<script>
// Our Javascript will go here.
var camera, controls, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>

Problem 1:
One of your methods namely THREE.CubeGeometry is deprecated, which means you should switch it to what the error suggests: THREE.BoxGeometry.
Do:
var geometry = new THREE.BoxGeometry(100,100,100);
Instead of:
var geometry = new THREE.CubeGeometry(100,100,100);
See Three.js referece
Problem 2:
On the other error you have a typo. Your're using materials instead of material.
Do:
var mesh = new THREE.Mesh( geometry, material);
Instead of:
var mesh = new THREE.Mesh( geometry, materials);

Uhm, I believe you just need to remove the 's' of materials in this function call:
var mesh = new THREE.Mesh( geometry, materials);
You have defined the variable "material", but not "materials", which is what the Uncaught ReferenceError means. And this error is the showstopper.

how to import json and rendering in three.js

Hi everyone i write code for importing a json file and rendering it with three.js i export the json file from three.js editor
it doesnt show any error in console
window.onload = function(){
var
shapeObjectUrl = "test.json",
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
loader = new THREE.JSONLoader();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
loader.load( shapeObjectUrl,
function ( geometry, materials ) {
console.log(geometry, materials);
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );
console.log(mesh);
render();
});
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
};
Json file:
{
"metadata": {
"version": 4,
"type": "geometry",
"generator": "GeometryExporter"
},
"vertices": [0,50,20,14.14213562373095,50,14.142135623730951,20,50,1.2246063538223773e-15,14.142135623730951,50,-14.14213562373095,2.4492127076447545e-15,50,-20,-14.14213562373095,50,-14.142135623730955,-20,50,-3.673819061467132e-15,-14.142135623730955,50,14.142135623730947,-4.898425415289509e-15,50,20,0,-50,20,14.14213562373095,-50,14.142135623730951,20,-50,1.2246063538223773e-15,14.142135623730951,-50,-14.14213562373095,2.4492127076447545e-15,-50,-20,-14.14213562373095,-50,-14.142135623730955,-20,-50,-3.673819061467132e-15,-14.142135623730955,-50,14.142135623730947,-4.898425415289509e-15,-50,20,0,50,0,0,-50,0],
"normals": [0.3826834323650897,0,0.9238795325112866,0,0,1,0.7071067811865475,0,0.7071067811865476,0.9238795325112866,0,0.3826834323650899,1,0,6.123031769111886e-17,0.9238795325112866,0,-0.38268343236508967,0.7071067811865476,0,-0.7071067811865475,0.3826834323650899,0,-0.9238795325112866,1.2246063538223773e-16,0,-1,-0.3826834323650895,0,-0.9238795325112868,-0.7071067811865474,0,-0.7071067811865476,-0.9238795325112866,0,-0.38268343236508984,-1,0,-1.836909530733566e-16,-0.9238795325112868,0,0.3826834323650895,-0.7071067811865478,0,0.7071067811865475,-0.38268343236508995,0,0.9238795325112866,-2.4492127076447545e-16,0,1,0,1,0,0,-1,0],
"uvs": [[0,1,0,0,0.125,1,0.125,0,0.25,1,0.25,0,0.375,1,0.375,0,0.5,1,0.5,0,0.625,1,0.625,0,0.75,1,0.75,0,0.875,1,0.875,0,1,1,1,0]],
"faces": [56,0,9,1,0,1,2,0,1,1,2,56,9,10,1,1,3,2,0,1,2,2,56,1,10,2,2,3,4,3,2,2,4,56,10,11,2,3,5,4,3,2,4,4,56,2,11,3,4,5,6,5,4,4,6,56,11,12,3,5,7,6,5,4,6,6,56,3,12,4,6,7,8,7,6,6,8,56,12,13,4,7,9,8,7,6,8,8,56,4,13,5,8,9,10,9,8,8,10,56,13,14,5,9,11,10,9,8,10,10,56,5,14,6,10,11,12,11,10,10,12,56,14,15,6,11,13,12,11,10,12,12,56,6,15,7,12,13,14,13,12,12,14,56,15,16,7,13,15,14,13,12,14,14,56,7,16,8,14,15,16,15,14,14,16,56,16,17,8,15,17,16,15,14,16,16,56,0,1,18,0,2,3,17,17,17,17,56,1,2,18,2,4,5,17,17,17,17,56,2,3,18,4,6,7,17,17,17,17,56,3,4,18,6,8,9,17,17,17,17,56,4,5,18,8,10,11,17,17,17,17,56,5,6,18,10,12,13,17,17,17,17,56,6,7,18,12,14,15,17,17,17,17,56,7,8,18,14,16,17,17,17,17,17,56,10,9,19,3,1,0,18,18,18,18,56,11,10,19,5,3,2,18,18,18,18,56,12,11,19,7,5,4,18,18,18,18,56,13,12,19,9,7,6,18,18,18,18,56,14,13,19,11,9,8,18,18,18,18,56,15,14,19,13,11,10,18,18,18,18,56,16,15,19,15,13,12,18,18,18,18,56,17,16,19,17,15,14,18,18,18,18]
}
i appreciate any help

The method you are using is right except for some minor things like, in loader.load function's call back you are trying to access material also but its not included in the JSON .
Now I used your code and was successfully able to load the JSON object, so there is nothing wrong with that, except that you are setting camera position to 5 which just makes the loaded model out of the view.
So you can reposition the model like this
var loader = new THREE.JSONLoader();
loader.load( 'models/jsonModel.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
mesh.position.x =500;
mesh.position.y =100;
mesh.position.z =500;
scene.add( mesh );
});
or set the camera position to some other position.
You can also use OrbitControls to instead.
Including the above mentioned things I have created a sample code here, you can look are lines 138 and 62, to understand better.

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

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

Develop Reference

JavaScript is the programming language of the Web.

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

Related

TextGeometry not displaying, Could anyone tell me why?

How to use a variable from one js file in another file?

3D model rotation on HTML with JS

how to import json and rendering in three.js

Can´t load js model in THREE JS

Categories

Resources