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.
Related
I'm learning JavaScript and using AWS SDK from JavaScript.
Reading an IAM example from the documentation, i saw the following pattern:
Create a file name iamClient.js where you instantiate an object and export it.
Create another file where you import the client created above to use it.
What is the main benefit of doing this instead of just create and use the object in the same file ?
I know this is a small example and maybe there is no issue doing everything in the same file, but i'm more curious if this is just for organization/best practice if something bigger is created based on this sample or if there is some sort of technical reason. :)
Well, that's how you'd create a configuration singleton for instance in another language.
Creation of such object might be expensive in time sometimes so you create it once and then just reuse it :)
During testing, if you provide a mock for your iamClient module you're set for all unit-tests (assuming you're using Jest or similar)
It also helps you to not repeat yourself as it's a codesmell
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' );
}
I'm playing with three.js and especially the Editor where you can attach Script on 3D object.
In Unity 3D you can access a script by using something like :
targetGameObject.GetComponent (scriptName).targetVariable;
How can you do this with three.js?
If I understand correctly, "Scripts" aren't a fundamental component of ThreeJS -- not in the same way as they are in Unity3D. i.e., The "scripts" in ThreeJS Editor would be better off named "scripting code" or something like that. When you publish your app, these script functions get exported to JSON as strings and get evaluated upon their associated events -- but no tangible "Script" object/component actually results from them.
In other words, the "Scripts" you're referring to in Unity3D would be something you would have to build out yourself or use an existing library.
I have a project that uses Twitter Bootstrap 3, however, I am supplementing the existing javascript situation with a CanJS app. For CanJS dependency management I chose their package StealJS. However, it appears that no matter what I do, StealJS insists on loading jQuery again, overwriting $.fn, of course.
In this question a core contributor answers that the solution is to "steal" a blank.js file. However, this breaks steal/build for production as can/util/jquery/jquery.js is passed 'jquery' as undefined (the results of blank.js).
I have tried variations on StealJS's stealconfig.js settings including map, paths, and completed but nothing seems to work.
Here is an example of doing this in RequireJS. Is the solution simply not to use StealJS and to use RequireJS instead?
You can try a solution that is similar to the RequieJS solution you linked to. That is, create a dummy file that looks like this:
steal(function(){
return window.jQuery;
});
And in stealconfig.js map jquery to wherever you put this file.
Let's say I saved some .ai file as .svg. Now I want to move all the vectors from this file to Raphael to manipulate them using JavaScript.
How can I do it? What are possible ways to achieve this goal? Please also write any pros and cons, so users will be able to choose best in their opinion way.
I had to do exactly the same thing a few months ago. I used rappar
I used node from the command line to do the conversion and save it to a file
node rappar.js test.svg >test.js
test.js now contains the vectors. The only thing I did find though is that line 537 of rappar
var files = process.ARGV.slice(0);
should be
var files = process.argv.slice(0);
Other than that it worked a treat.
You could loop through the nodes of the SVG and write them to the Raphaël object one by one, but unless you are dealing with nonstandard element types/attributes you are better off using one of the Raphaël plugins that make importing SVGs a one-line command. Such as:
https://github.com/crccheck/raphael-svg-import-classic
https://github.com/wout/raphael-svg-import
I found some simple converter here.
Pros:
It's really simple and straightforward - you upload the file, and get generated code. You can even see a preview of it. When you load really simple .svg it's working perfectly, and you can easily edit the code, but...
Cons:
But the biggest problem of it is that the code is a little bit messy. So if you load bigger file (100+ vectors, or even more; I loaded sth around 1000 for testing purposes). Also names and structure of it doesn't respond to layer's division. Sometimes some of the layers (you can see it in preview) are not in correct order, so if you want to see exactly the same 'image', you need to browse the code, looking which path correspond to which object in .svg file.
Anyway it's the only one I found, and in the end (after some work) you can achieve what you want. Best way to work with it is when you upload your .svg portion by portion, to avoid flood of messy code.
This one worked really well for me http://roomandboard.github.com/vectron/
When installing the rappar dependency at https://github.com/DmitryBaranovskiy/rappar you need to remove the Node.js code to get it to work.
Pros:
Not much code required.
Cons:
It can be a little slow on larger SVGs. You might want to consider saving it to JSON with another Raphael plugin to make the load faster the next time.
All of the vectors are in the file, so you could put those paths to a variable string and Raphael wil use that.