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);
Related
I have presented a simple example to illustrate what my problem is. in functions it's easy to use await async to make sure textures are loaded before proceeding with the program. if I want to work with classes because of the cleanliness of the program, I have no idea how I can do this so that the constructor waits until the texture is loaded before the subsequent function is called.
//in my three.js init function
var sphereObject = new Sphere(100, texture);
var sphere = this.sphereObject.sphere;
scene.add(sphere);
//------------------------
class Sphere{
constructor(radius, preloadedtex){
//this.material = this.doSomething(preloadedtex); this work fine
const loader = new THREE.TextureLoader();
loader.load("grass.png", function(texture){
this.material = this.doSomething(texture);
});
const geometry = new THREE.SphereGeometry( radius, 128, 64 );
this.sphere = new THREE.Mesh( geometry, this.material);
}
doSomething(texture){
//further operations with the texture before the function returns a material
return material;
}
}
TextureLoader has an onLoad callback as the second argument of .load(). This is taken directly from the docs:
const loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'textures/land_ocean_ice_cloud_2048.jpg',
// onLoad callback
function ( texture ) {
// in this example we create the material when the texture is loaded
const material = new THREE.MeshBasicMaterial( {
map: texture
} );
},
// onProgress callback currently not supported
undefined,
// onError callback
function ( err ) {
console.error( 'An error happened.' );
}
);
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
I'm using STLLoader to load STL file into three.js and I want to get the vertices (and the geometry) of the model after I call the loader for further usage. How can I do that? My current code is as below but I cannot get the geometry after calling the loader.
var loader = new THREE.STLLoader();
var myModel = new THREE.Object3D();
loader.load("myModel.stl", function (geometry) {
var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
var geo = new THREE.Geometry().fromBufferGeometry(geometry);
myModel = new THREE.Mesh(geo, mat);
scene.add(myModel);
});
console.log(myModel.geometry.vertices)
As of three.js R125, the recommended way to do this is with the loadAsync method, which is now native to three.js:
https://threejs.org/docs/#api/en/loaders/Loader.loadAsync
That method returns a promise. You couldthen use a 'then' to get the geometry of the STL and create the mesh. You could also use a traditional callback, or an async/await structure, but I think the example below using the native three.js method is the simplest way. The example shows how you can get geometry to a global variable once the promise is resolved and the STL file is loaded:
// Global variables for bounding boxes
let bbox;
const loader = new STLLoader();
const promise = loader.loadAsync('model1.stl');
promise.then(function ( geometry ) {
const material = new THREE.MeshPhongMaterial();
const mesh = new THREE.Mesh( geometry, material );
mesh.geometry.computeBoundingBox();
bbox = mesh.geometry.boundingBox;
scene.add( mesh );
buildScene();
console.log('STL file loaded!');
}).catch(failureCallback);
function failureCallback(){
console.log('Could not load STL file!');
}
function buildScene() {
console.log('STL file is loaded, so now build the scene');
// !VA bounding box of the STL mesh accessible now
console.log(bbox);
// Build the rest of your scene...
}
i'm trying to use a very simple 3dobject i made with Maya in my threejs project using jsonloader but i have a few problems.
The ojbect is composed by a few different material (Lambert and Phong) and different colors.
To create the .json file i use Maya to create a .obj then Blender to make the .json and everything seems fine but when i try to import it loading HIS material i can't even load the model, instead if i use a random material while loading i'm able to correctly load the model.
var loader = new THREE.JSONLoader();
loader.load("http://localhost:8000/object/planev2.json", function
(mygeo,mymat){
var mat = mymat[0];
mymesh = new THREE.Mesh(mygeo,mat);
mymesh.scale.set(50,50,50);
scene.add( mymesh );
});
TL:TR - Is possible to load directly from a .json an object made by different materials ?
Try the following code:
var material = new THREE.MeshPhongMaterial( {
color: 0xdddddd,
specular: 0x222222,
shininess: 35,
map: THREE.ImageUtils.loadTexture( "tex/map1.jpg" ),
specularMap: THREE.ImageUtils.loadTexture( "tex/map2.jpg" ),
normalMap: THREE.ImageUtils.loadTexture( "tex/map3.jpg" ),
normalScale: new THREE.Vector2( 1, 1 ),
morphTargets: true
} );
loader = new THREE.JSONLoader( );
loader.load( "mesh.json", function( geometry ) {
mesh = new THREE.Mesh( geometry, material );
mesh.name = "male";
scene.add(mesh);
});
loader.onLoadComplete = function () {
console.log("Loading is complete!");
}
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 );
}
);