I came to find this library that downloads stl from threejs.
https://github.com/mrdoob/three.js/blob/master/examples/js/exporters/STLExporter.js
I am new to js / threejs, so I was wondering how could I incorporate this within my script, or how to link it as a library or other file.
Please note that the model I want to download is either one built from scratch in threejs or one that I imported as glb/gltb and changed some of its features in threejs.
Thank you.
There is an official example that demonstrates the usage of STLExporter. I suggest you study the respective source code and use it as a foundation for your own app. You can find the mentioned example right here:
https://threejs.org/examples/misc_exporter_stl
Please note that the model I want to download is either one built from scratch in threejs or one that I imported as glb/gltb and changed some of its features in threejs.
Please keep in mind that STL has no concept of materials. It only saves the raw geometry data. STL is also unable to export hierarchical information of a scene (e.g. child-parent relationships). So depending on what you are going to change in your scene, it's likely that the respective data can't be exported as expected.
There is two implementation for export,ASCII & Binary,
function exportASCII() {
const result = exporter.parse( mesh );
saveString( result, 'box.stl' );
}
function exportBinary() {
const result = exporter.parse( mesh, { binary: true } );
saveArrayBuffer( result, 'box.stl' );
}
Related
I want to use some low poly models from https://clara.io/ as a ThreeJS JSON model in A-frame. I want to use this because it is much more efficient and smaller than a 3D model, which will load much faster also. But there is no description of how to use it.
As I see there are some other people (1,2,3,4) who have trouble with that but no one suggested any good idea.
So do anybody has a good description or step-by-step guide, or something like that? I tried to use as a script, mentioned in the official description, but didn't worked:
<a-scene>
</a-scene>
<script type="text/javascript">
var loader = new THREE.ObjectLoader();
loader.load("globe.json",function ( obj ) {
document.getElementsByTagName('a-scene').add( obj );
});
</script>
Tried to use it with object loader, but I've got the dependency error module is not defined. So now I'm a bit confused about this,, how to use, or how to start using models in this way.
Any suggestion, any idea about this?
tldr: afaik JSON models are deprecated, and trying to make them work would mean creating a new loader from scratch.
I'm afraid the best solution is to:
download blender
download the model in a *.blend format
open it up in blender
export as glb
load it up as a gltf-model.
non - tldr:
Trying to load up a json model via the THREE.ObjectLoader, it tries to use JSONLegacyLoader.
To find it, you need to check out threejs R110 before it was completely removed (loader here).
After all, it needs the deprecated Geometry. When imported, something crashes in the rendering pipeline. Doesn't look like its worth the effort.
Tried with this model.
I am trying to create to create a webapp in which users can upload obj/fbx files and view them in the browser. I have used the OBJLoader and FBXLoader which Threejs provides and it is all working fine. I however want to convert both these models to GTLF before loading them into the scene (for the sake of consistency).
How can I achieve this in threejs? I know that threejs has a GTLF exporter but I am unaware of how to leverage it for my purposes.
There are two ways you could do this:
Method 1:
Convert using from OBJ or FBX to glTF using native libraries on your server, like obj2gltf and fbx2gltf.
Load the glTF file on the web app.
Method 2:
Load the OBJ or FBX using OBJLoader or FBXLoader, giving you a THREE.Mesh or other object.
Convert that THREE.Mesh to a glTF file using GLTFExporter.
Load the glTF file using GLTFLoader, giving you a THREE.Mesh or other object again.
Method 1 is harder, but may give you better conversion results because the native libraries have access to the FBX SDK. Method 2 is fairly easy, but I can’t think of any benefit to doing that… the Mesh you have after the loading the OBJ or FBX will be (at best) the same as the Mesh you get at the end. At worst, the roundtrip through GLTFExporter->GLTFLoader may introduce performance or correctness problems.
I am using just the BokehJS part of Bokeh since i am building a more production oriented system.
Unfortunately it seems that the actual BokehJS part of Bokeh is not documented that much, which makes it difficult to find the needed information, such as how to format data for the bokehJS object.
What I am trying to do is to make a simple line graph, however instead of having just one line i would like to have multiple lines, and the possibility of making a legend describing each line. Its a very basica plot, however i did not find any way to do this in bokehJS.
In order to make a plot with a single line i execute the following javascript:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot({type:'line'}, {x:[1,2],y:[4,5]}, {})
,'.mydivcontainer');
How do i alter this so that i can have 5 lines in the same plot as well as a legend, basically similar to this which is written in standard bokeh:
from collections import OrderedDict
import pandas as pd
AAPL = pd.read_csv("aapl.csv", parse_dates=["Date"])
MSFT = pd.read_csv( "msft.csv", parse_dates=["Date"])
IBM = pd.read_csv( "ibm.csv", parse_dates=["Date"])
xyvalues = OrderedDict(
AAPL = AAPL[("Date", "Adj Close")],
MSFT = MSFT[("Date", "Adj Close")],
IBM = IBM[("Date", "Adj Close")],
)
df = pd.concat(xyvalues, axis=1, names=["l0", "l1"])
from bokeh.charts import TimeSeries
ts = TimeSeries(
df, title="timeseries, pd_input",
filename="stocks_timeseries.html")
ts.legend("top_left").show()
(Taken from the release note: http://continuum.io/blog/bokeh-0.6 )
Thank you very much in advance for your help
it's definitely true that the developing and documenting the JS interface has lagged behind the other interfaces (python mostly, but also scala and Julia and soon R). We plan to improve this, but as you can imagine there are lots of competing priorities.
But I will mention another option, in case it is useful to you. It is possible to create the plot JS from python, and then use the JS directly. That is you only use python to set things up, then you can throw the python away. You can use functions in bokeh.embed to turn your python plot object graph into JS that you can embed however you like.
With more recent version of Bokeh, you can also easily grab ahold of the plot objects (for instance data sources) to update the plot directly from JS. See, for instance:
https://github.com/bokeh/bokeh/blob/master/examples/embed/spectrogram/spectrogram.coffee#L187
ahhh now i have seemed to figure this one out.
To enable multiple lines, it seems i can do like this:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot([{type:'line'},{type:'line'}], [{x:[1,2],y:[4,5]},{x:[1,4],y:[2,5]}], {})
,'.mydivcontainer');
Great :)
I have a files in .FBX and I need to convert them in collada so I can use them in Three.js.
I managed to convert them with FBX Converter but then I lost textures.
How can I convert them so I can use textures.
Here is the FBX converted with FBX Converter:
pearl.dae
And here is the link of model which I exported as FBX_DAE in Maya 2013
model2.dae
I have just import the FBX and export as FBX_DAE
Model exported in Maya has texture if I do the quick preview on Mac but when I load it in Three.js it has no textures.
And the pearl.dae converted with FXB converter has no texture neather in quick previw nor in Three.js
Here is my loader code:
var Loader = new THREE.ColladaLoader();
Loader.options.convertUpAxis = true;
Loader.load('./models/pearl.dae', function(collada){
Bracelet = collada.scene;
Skin = collada.skins[0];
Bracelet.scale.x = Bracelet.scale.y = Bracelet.scale.z = 1;
Bracelet.updateMatrix();
init();
render();
});
Please help.
I have looked over your model files, pearl.dae contains no references to any textures. You might want to double-check your FBX converter settings and any errors or warning you may get. model2.dae on the other hand does reference a texture with the relative path of "../../Model/Nialaya_perla.fbm/Perla_diffuse.jpg" (the texture is not contained within the model file itself). I don't recall if Three.JS will automatically load textures from Collada model files, but unless that path is correct it will definitely fail. In my experience with Three.JS, it's usually better to load textures, create shaders, and apply them to plain models with just code. This will also give you the greatest control over the final look.
Can somebody give me some information or a tutorial, to import an 3d model in format .obj with three.js?
You can get examples from here:
https://github.com/mrdoob/three.js/tree/master/examples
For importing models in .obj format,you may get the example from:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj.html