At the moment I need to convert all my IFC files into Collada format to visualise them in Three.js. Is there any IFC Loader in three.js? I could not find anything.
Is there any plan to develop an IFCLoader in the near future?
How difficult it would be to write that?
May be a late answer for this question. Have you seen the BIMserver plugin to get a three.js export of your IFC file? Check it out from here
I haven't encountered a native Javascript parser that can directly read IFC files, however there is a product from Apstex available. It's a Java tool that outputs three.js geometry.
We're using that as a self running web service, so the client sends an IFC file and receives the JSON Three.js geometry (which is then loaded in the viewer).
It might be a bit late, but we have recently released the official IFC Loader for Three.js. It's relatively young and we still have work to do, but it's able to open a lot of IFC files already. Assuming you have an HTML input element in your scene:
import { IFCLoader } from "three/examples/jsm/loaders/IFCLoader";
//Sets up the IFC loading
const ifcLoader = new IFCLoader();
ifcLoader.setWasmPath("wasm/");
const input = document.getElementById("file-input");
input.addEventListener(
"change",
(changed) => {
var ifcURL = URL.createObjectURL(changed.target.files[0]);
console.log(ifcURL);
ifcLoader.load(ifcURL, (ifcModel) => scene.add(ifcModel.mesh));
},
false
);
You can visit the docs to see the full tutorial, see the official example or let us know if you have any question / feedback / want to contribute in the Discord channel.
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
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
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 struggling to get an exported scene from blender into three.js and have been researching and experimenting for about two weeks now, however all information I can find on the subject seems to date back several years and is now too out of date to be of use.
I'm working with the following
Blender: 2.7.7
Blender Threejs export: 1.5.0
Three.js: r76
I've tried a few hundred combinations of export settings and while I can always get the geomety exported correctly, the materials while referenced correctly as far as I can see in the JSON file do not seem to want to load in. This occurs with both embeded and referenced textures.
While I have plenty of code samples for loading in JSON with the ObjectLoader all the images, references I find are to much older versions of the exporter (which I have tried) and I've yet to find one thta contians materials, the closest I found was a blender export with colours.
If anyone has any resources for the exporter or the object Importer, or would be able to see any issues with the JON file t would be a great help. The documentation and resources I can find are rather thin on the ground for the newer versions of ThreeJS it seems.
Here is a sample of the exported JSON https://paste.ee/p/RH42a I encoded the textures on this one. For some reason it's also exporting upside down, but that can be easily fixed.
Object loader
var loader = new THREE.ObjectLoader();
loader.load('obj/test/blender/export/test.json', function(obj) {
scene.add(obj);
});
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