I'd like to take a lot of screenshots and export .glb from thousands of generated a-frame models. Since I can't save files from the browser without prompt, generating the models on the server-side with node.js would be awesome.
(As a workaround I could probably generate the models in the browser and POST them to a local server that saves the files to disk but I'd prefer the server-side rendering if possible)
So, how can I render A-Frame models in node.js?
Tried approaches like this with mock-browser for mocking the DOM (which is necessary in three, let alone DOM-based a-frame) and headless-gl for creating a WebGL context in node.
No luck there, so I settled with an electron application.
tldr: check this out. Download, npm install; npm run start; and render screenshots / export the scene as glb. If you like it, let me know how to improve it to make it more useful.
non tldr:
You can load up an a-frame website using electron, but use the main process to save the screenshot on your drive - so there are no prompts, and it can be automated.
To make a render, You can simply use the native screenshot component to create a canvas containing the screenshot image
document.querySelector('a-scene').components.screenshot.getCanvas('equirectangular');
but instead of downloading the blob, pass it into the main process via an renderer to main IPC channel - where you can save it on your drive.
Related
Following my first question, I realized that the reason I couldn't get anything to work was that I was trying to use the require() method in the browser. In learning that this is not how Node works, I was confused. I understand now that Node is only a run-time environment that allows the use of JavaScript within the console. However, I'm still left with the question of how to achieve the functions of Node within the browser. (i.e. creating a button in the browser that creates a file using Node.) I've installed Browserify but I cannot find a good tutorial on how to use it. I'm very new to Computer Science so please forgive me for the redundant questions. Thanks a lot.
Things do change. Apparently it will be possible to use node.js in the browser soon. You might be interested in this: Run Node.js in the browser
Node as you made the point is server-side runtime environment for js and the browser is client-side. Node.js has many useful built-in functionalities and they are not accessible in browser.
I recommend you to take a look how backend and frontend differs and how do they communicate with themselves. Then I think you will understand how to achieve creating a file by clicking a button in the browser.
Sorry I don't know anything about browserify but it would be better to learn node in cli.
I've just started my IT degree and I'm a beginner to the use of APIs (and forums like this) so I am truly sorry if my question is to vaguely explained or if it is just plain stupid :), on top of that I'm not a native English speaker :P. Okay, so I'm trying to use Google trends' api which I installed in my server with putty by using sudo npm install google-trends-api. (it can be found here https://www.npmjs.com/package/google-trends-api#installation) As I undestand it, this is a server side api so the scripts that I write with the methods provided for this api will not run on an explorer as normal js files do. There is an example that makes use of the API that I found on the page which is as follows
var googleTrends = requite('google-trends-api');
googleTrends.hotTrends('US')
.then(function(results){
console.log(results);
})
.catch(function(err){
console.log(err);
});
this outputs a list of 20 items on the console when I use it on node.
I would like to know if there is a way to assign those results to a variable and then use that variable in a normal javascript script inside a html file. I do not know anything about node.js and the like, and I would like to actually do some research instead of asking here but I was going to use a different approach to acquire such information but now I've had to change my plans and do not have enough time and given I consider this is a fairly easy problem to resolve (maybe?) I would really appreciate it if someone could walk me through the basics of each step. THanks :) and have a nice day.
Your question is quite broad. Node.js is Chrome's V8 engine bundled with some libraries to do I/O and networking. This enables us to JavaScript outside of the browser and to create backend services or servers in general (in your case). I hope that you are aware of this difference :)
The first thing that you have to do, is to have a look at express.js and to create a simple server. It will not be more than 20 lines of code. Then you have to enrich this with more stuff like a template engine (handlebars.js, jade etc). You have to enable the server to serve static files that will be finally your js, css and image files. Creating this simple server you will be able to serve simple html page in the first place. On top of that you should have the client side javascript that you have to write and now you can use the module above. Unfortunately, you are not able to use this module directly on a javascript file that you will write. To be able to use this module you have to transcompile this thing into javascript that browser understand*. Remember that browser does not understand the require statement and some old browsers possibly will have issues with the promises that this module is using. These are the things that should be compiled. You have to use a tool like browserify for this and the compiled file that this will extract it must be included in the scripts of your html page.
Maybe there are quite a lot of concepts that you are not aware of or you don't understand them but spend a bit of time to understand them.
P.S.: I' ve replied under the assumption that google-trends-api module does not use things that are specific to node.js like the file-system for example.
Is there a way to load the node.js bower components and node modules efficiently i.e. in as much less time as possible?Every time when the user opens the app for the 'first time' it takes ages to download the components and render the page.
Currently it is taking around 10-15 seconds to get downloaded when we run the application for the first time which is not at all good!
I tried using gzip compression but failed to use it efficiently.
Any help with the process or method would be great!
Thanx.
You would usually not want to deliver the individual files to the users.
Instead you can use a tool that minifies and bundles your dependencies. This will lead to the users only needing to download one minified file (usually called vendor.js or something similar) that contains all the javascript needed. This reduces the number of requests and saves time.
You might want to take a look at grunt or other build tools as a possible solution for your problem. Here is a basic example
I am building a meteor application that creates pdf files from a web page using phantomjs.
PhantomJS is called with node's child_process.exec function within a fiber using Meteor._wrapAsync. When I am using any url like google.com, it is working fine and the pdf is created.
The problem is, I want to capture a site served by the same meteor application at /invoicePDF. But during the execution of phantomjs the site apparently does not load, thus, it cannot load inside phantomjs, which makes finishing the call to phantomjs impossible.
The solution seemed to be to use Meteor.bindEnvironment instead of Meteor._wrapAsync. Unfortunately, I have know idea why.
So, I'm developing a node.js app that will show some markers in google maps according to the locations it finds in the database, which will then be converted and saved to a .txt file. Everything works great up until that point.
If i do a console.log() of the converted latitudes and longitudes it will show them perfectly.
However, in the .html file with the maps api i have to import the file that will return the coordinates.
Since this file is written in html with script tags to import the script, it interprets those scripts as javascript, and because of that, it stops working.
Firebug shows me that the file is found and shows me the content of it, but in the .js script file i have to do stuff like this to use node.js modules, that are necessary for my functions to work.
var fs = require('node-fs');
or like this to use functions in the file from other modules.
exports.someFunction = someFunction;
So, when the browser loads the map and tries to find the coordinates that i'm passing from the script that reads the .txt file where they're saved, it finds any of those two things and can't process them, because they're node.js, not plain javascript.
So my question is, how do i get javascript to recognize require() and exports when they're node.js commands?
If I understand you correctly and you're trying to use Node.js module system in browsers, that won't work. Browsers doesn't implement such features natively. Script files can only be included to the page with script tags or some kind of ajax system that fetches the files from the server. There are few such a libraries that provide such a functionalities.
RequireJS might be what you're looking for the client side though.
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
Also note that some of the Node.js features are not possible in the browsers. For example the direct file system access is not possible in the browsers, it would be a huge security risk.
Most javascript modules that provide both server and client side functionalities explicitly mentions it and provide separate script files for both sides.
Also if you only want to send coordinate data from the server to the client, then it might be good to use Ajax or WebSocket to send the data in a JSON format.