We Keep Coding

Three js - JSON loader works in example but not in my code?

Im just trying to load in a model with animations from blender to three js. So Im trying to copy http://stemkoski.github.io/Three.js/Model-Animation.html
I downloaded his code, and he uses:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/android-animations.js", addModelToScene );
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
// for preparing animation
for (var i = 0; i < materials.length; i++)
materials[i].morphTargets = true;
var material = new THREE.MeshFaceMaterial( materials );
android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
scene.add( android );
}
Granted Im working in node JS, but I get error JSONLoader has been removed when I do:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);
Ive tried FBXLoader, ObjectLoader, everything. I can load models but not models with animations. Is this the only solution?
If JSONLoader doesn't exist anymore, how can I load in a model with an animation from blender?
UPDATE:
this is undefined when I use LegacyJSONLoader like this:
var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);
addModelJson( geometry, materials, scene )
{
// for preparing animation
for (var i = 0; i < materials.length; i++)
materials[i].morphTargets = true;
var material = new THREE.MeshFaceMaterial( materials );
var android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
this.scene.add( android );
}

For the second issue where this is undefined.
this is probably not the object you're looking for. this can mean many different things depending on how you're using it and where you're using it.
However, it looks like scene is passed in to your function so you should be able to do this instead:
var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);
addModelJson( geometry, materials, scene ) // <-- scene is passed in
{
// for preparing animation
for (var i = 0; i < materials.length; i++)
materials[i].morphTargets = true;
var material = new THREE.MeshFaceMaterial( materials );
var android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
// this.scene.add( android ); `this` isn't what you are thinking it is
scene.add(android); // <-- use the passed in `scene` object instead
}

This loader is still available as LegacyJSONLoader. If you include that file in your project, you should be able to create an instance of LegacyJSONLoader and load your JSON model as before.
Here is the Link

three.js aoMap is not rendering on uv2 while lightmap is rendering

We are trying to set the aoMap with three.js, but it is not rendering, while lightMap is working on model
Code for setting uv2 into geometry:
// instantiate a loader
var loader = new THREE.BinaryLoader();
// load a resource
loader.load(
// resource URL
'temp-models/binary/door-boot-01.json',
// Function when resource is loaded
function ( geometry, materials ) {
geometry.sortFacesByMaterialIndex();
geometry.mergeVertices();
geometry = new THREE.BufferGeometry().fromGeometry( geometry );
// self.setupOBJCAR(geometry, materials, self.car.urls.obj[0]);
// return;
loader.load(
// resource URL
'temp-models/binary/door-boot-02.json',
// Function when resource is loaded
function ( geo2, materials ) {
geo2.sortFacesByMaterialIndex();
geo2.mergeVertices();
geo2 = new THREE.BufferGeometry().fromGeometry( geo2 );
var uvs = geo2.attributes.uv.array;
geometry.addAttribute( 'uv2', new THREE.BufferAttribute( uvs, 2 ) );
// console.log(geometry.toJSON());
//Creting Mesh with aoMap in all materials.
}
));
Example link:
http://design.girnarsoft.com/centraljs/creta3d/index-ao.html

How to add a JSON object / model into your whitestorm.js world / scene?

I am loading the object from my json file.
var loader = new THREE.ObjectLoader();
loader.load("blue-car.json",
function ( car ) {
car.position.set(2, 0, 0);
car.addTo(world);
}
);
And this is the error...
How can I add the object to my world? In regular three.js it works when I load the json file, but how do I do it in whitestorm?
Thank You!

Have you tried looking to documentation?
Use this sample code:
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'models/animated/monster/monster.js',
// Function when resource is loaded
function ( geometry, materials ) {
var material = new THREE.MultiMaterial( materials );
var object = new THREE.Mesh( geometry, material );
scene.add( object );
}
);

Three.js Blender Import Black Textures

im currently trying to update individual textures based on cursor position on imported JSON model. Below is the import code for the JSON model
var loader = new THREE.JSONLoader();
loader.load('slicedNew.json', function(geometry, materials) {
console.log(materials);
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial( materials ));
mesh.scale.x = mesh.scale.y = mesh.scale.z = 8;
mesh.translation = THREE.GeometryUtils.center(geometry);
scene.add(mesh);
console.log('IMPORTED OBJECT: ', mesh);
});
Below is raycaster code for when the cursor is over a particular material
switch(intersects[0].face.materialIndex)
{
case 0:
console.log('0 material index');
intersects[0].object.material.needsUpdate = true;
intersects[0].object.material.materials[0] = new THREE.MeshLambertMaterial({
map: crate
});
break;
Anytime I hover over a certain side of the shape the texture is loaded but it is always black, even initialise the model to use the texture it still appears as black, yet I can load in a simple cube and map the image as a texture to this shape with no issues.
Any help would be appreciated.

Loading an object with Three.js fails (missing formal parameter)

I want to use Three.js (OGL + JavaScript) to load an object from file. I have an working example without loading it (some basic elements rendered). But when I try to load object using JSONLoader.load(...), Firefox console shows error:
SyntaxError: missing formal parameter
The reference: http://threejs.org/docs/#Reference/Loaders/JSONLoader
The source code for my added fragment (loading object), which cause an error:
//loading an object
var loader = new THREE.JSONLoader(); //works so far
loader.load("./Project2/proj/grzyb.js",
function(geometry,
new THREE.MeshLambertMaterial( { map: texture, ambient: 0xbbbbbb } )
//for the line above, in Firefox console i get
//"SyntaxError: missing formal parameter"
){
var materials = new THREE.MeshFaceMaterial(
new THREE.MeshLambertMaterial( { map: texture, ambient: 0xbbbbbb } )
);
grzyb = new THREE.Mesh(geometry, materials);
grzyb.scale.set(5, 5, 5);
grzyb.position.set(2,2,2);
grzyb.receiveShadow = true;
grzyb.castShadow = true;
scene.add(grzyb);
}
);

You are trying to insert MeshLambertMaterial creation into a function header definition. Function header can only contain parameter names - not any actual code to create them.
Also it is not clear whether you want to use material coming from model file or your own material with texture that you loaded elsewhere (in the example there is no code that would set texture variable). Assuming you want to use materials from model, your code should look like this:
var loader = new THREE.JSONLoader(); //works so far
loader.load("./Project2/proj/grzyb.js",
function(geometry, materials) {
var material = new THREE.MeshFaceMaterial( materials );
grzyb = new THREE.Mesh(geometry, material);
grzyb.scale.set(5, 5, 5);
grzyb.position.set(2,2,2);
grzyb.receiveShadow = true;
grzyb.castShadow = true;
scene.add(grzyb);
}
);
if you want to use different material, then set material variable to anything you want. exmaple:
var texture = THREE.ImageUtils.LoadTexture( "../path/image.jpg" );
var material = new THREE.MeshBasicMaterial( { map:texture } );
var grzyb = new THREE.Mesh(geometry, material);