I can successfully load a 3D object from, for example, an FBX File, load and play it's animations. The problem is that, after doing what i gotta do with it, i need to save the changes. To do that, I'm saving the object and the object animation clip to a JSON. I can, now, load the 3D Object in the scene, but no animations will play(it'll stand on T pose), but trying to load the saved clip on the object loaded from FBX will play the animation without a problem.
After reading the resulting JSON from the 3D Object, a lot of data seems to be missing, that's why trying to play animations does nothing.
How can i save the loaded FBX model to a .json and keep the important data? I remember seeing some post about putting some flags on the toJSON method, but couldn't find anything similar again.
Edit:
Using GLTF seems to solve this problem, but three.js GLTFLoader isn't loading any kind of .gltf object and i don't know why, for all of the objects i've tried using (used objects from threejs.org GLTFExporter examples) i'm getting the same error:
TypeError: Cannot read property 'geometry' of undefined
at GLTFLoader.js:2572
That's how i'm trying to load it:
loader_helper.gltf_loader.load("./src/data/scene.gltf", function ( gltf ) {
console.log(gltf); // This is enough to get the error, altough i've tried
// mimicking the FBX import, but getting the same errors
});
Edit: Using https://gltf-viewer.donmccurdy.com/ to view the object, the object i exported was completely bugged ( https://imgur.com/a/yLimuWp ) and i didn't notice, but i tested the bugged object three times, so i thought the problem was in the loader, it is seems to be loading fine using a non-bugged object. Although the export is bugged, the object skinned mesh is loading without issues and only the mesh is being loaded with, wel.. you saw it. https://imgur.com/a/evGmnOG
That's how i'm exporting the scene:
// this is a button.onclick function
var exporter = new THREE.GLTFExporter();
exporter.parse( that.scene, function(gltf){
var stringfied = JSON.stringify(gltf, null, 3);
require("fs").writeFile( "./src/data/scene.gltf", stringfied, 'utf8', function(err) {
console.log(err); // saving it to file with nodejs file system
});
console.log(gltf);
} );
Related
I want to create an extension that can load gltf once the method is call. I'm using the latest threejs module according to this blog. But got an error.
Here's my code.
const gltfLoader = new GLTFLoader();
let example = new THREE.Object3D();
gltfLoader.load(
"https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf",
(gltf) => {
example = gltf.scene;
console.log(example);
if (!this.viewer.overlays.hasScene("gltf")) {
this.viewer.overlays.addScene("gltf");
}
this.viewer.overlays.addMesh(example, "gltf");
}
);
Regarding the glTF, you may check out this blog post and consider using the Autodesk.glTF ext instead: https://forge.autodesk.com/blog/gltf-20-support-forge-viewer
viewer.loadExtension('Autodesk.glTF').then(() => {
viewer.loadModel('address/of/your/model.gltf');
});
See here for the code sample: https://github.com/petrbroz/forge-basic-app/tree/experiment/gltf2
Here's a couple of things to keep in mind when working with glTF files in Forge Viewer:
The viewer extension does not aim to be fully compliant with the glTF 2.0 specification
For example, the material/shader system in Forge Viewer is different from the PBR (physically-based rendering) materials used in glTF, so the viewer will not be able to represent all glTF materials to their full extent
Some features of the file format such as animations are not supported
If the glTF file defines multiple objects in a tree structure, the individual objects will be selectable in the viewer and the tree structure will appear in the Model Browser dialog; note however that many glTF files store the entire scene as a single object
The glTF specification does not use any concept of metadata attached to individual elements; the Properties dialog in the viewer will therefore not provide any additional information about selected elements
So I have two issues right now.
it seems objectloader never load the texture of 3d model from json files.
I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.
Here is what it should look like
Here is what it looks like on my browser
Here is THREE.JS code:
var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
var mesh = new THREE.Mesh( geometry);
$scene.add( mesh );
});
Export setting:
And here is how the json file looks like:
Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.
I suggest using a different format than THREE.js internal format.
It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.
I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.
https://gltf-viewer.donmccurdy.com/
There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:
https://threejs.org/editor/
I'm attempting to migrate my Coin3d geology visualization projects over to Three.js. I've experimented with the various loaders and have decided to use the JSON format & loader to load mesh data, but I cannot find a method for storing and loading lines, points, and text. I tried the VRMLLoader, but the following code:
var vloader = new THREE.VRMLLoader();
vloader.load('line.wrl', function (geometry) {
var line = new THREE.Line(geometry);
scene.add( line );
});
returns nothing, which isn't surprising, given that IndexedLineSet is not referenced in VRMLLoader.js (IndexedFaceSet, Cylinder, Cone, etc are there). The JSON Geometry format 4 and Model Format 3 are mesh-centric if not mesh-exclusive, and I wonder if there are plans to add something like
"data":{
"lines":[3,0,1,2,3...],
"points":[0,2,4,1,3...]
}
to the spec? In the meantime, does one of the other loaders support loading Lines, Points, and Text? If not--and I assume the answer is no--is the best way to go about this to hack the JSONLoader to read
"lines":[3,0,1,2,3...] # or whatever I want to call it
and if so, how would one go about doing so? In the loader callback, or would I have to make a custom my_JSONLoader.js?
I am currently working on support for IndexedLineSet in the VrmlParser project. VrmlParser uses a ThreeJs renderer for display: http://github.com/bartmcleod/VrmlParser
I'm trying to import the simpliest Blender scene (camera included) into three.js, but whatever set of options I mark when exporting I always get an exception (data is undefined) when doing the "loader.parse" of the file content (a json string or event an already parsed object) and nothing is shown.
What can be wrong? Is it a bug?
Im using the latest threejs version from github and blender 2.72.
This is what the console.log of the JSON parsed file looks like:
Object { urlBaseType: "relativeToScene", metadata: Object, objects: Object, geometries: Object, materials: Object, embeds: Object, transform: Object, defaults: Object }
Thanks!
I have inspected the code step by step and it seems that the Blender plugin is outdated, the expected data structure at many points for the current version of three.js loaders is quite different then tue data structure returned by the plugin.
EDIT: It's already working in the dev branch! :D
enter link description here
I tried to import models from the 3D Warehouse, but some models fail to load (error in ColladaLoader.js (line 2808)
Uncaught TypeError: Cannot read property 'input' of null). I experienced this error with a lot of different models from 3D warehouse.
I prepared a fiddle (elcsiga/rep1z1xt/4), it loads the model from a different domain via ajax (CORS violation), however it worked me in Chrome.
A fully working example (fails to load model):
http://projecthost.hu/webview/jsfiddle/metro.html
Exactly same code with the monster model from three.js repository (it works):
http://projecthost.hu/webview/jsfiddle/monster.html
The collada model is available here: projecthost.hu/webview/jsfiddle/metro.dae
First I tried to download it as a .kmz file, unzip and use the .dae file in it directly. Additionally, I tried to download the .skp file, opened it in Sketchup and exported it into .dae format, but got the same error in ColladaLoader.js.
Do these models contain an unsupported geometry, or is it a bug in Collada loader?
Thanks.
The Model don't have any vertices so the Loader cant create a geometry. (maybe I'm wrong)
You created the Model via Google SketchUp right?
https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
find
var vertexData = sources[ this.vertices.input['POSITION'].source ].data;
in ColladaLoader.js, replace it with
var vertexData = [];
if (this.vertices && this.vertices.input['POSITION'].source) {
vertexData = sources[ this.vertices.input['POSITION'].source ].data;
}
this can fix my problem by avoiding empty vertices. It may lost some info of dae file, but it won't harm ColladaLoader.js's function.