Three.js
773 views
Skip to first unread message
mark hubrich
Mar 4, 2017, 11:37:44 PM3/4/17
to Node-RED
Has there been any attempt to try this in node-red? I've been playing with the steelseries gauges in a template and have an idea for a tilt widget. It seems to me that it could work but if someone knows a reason why it wouldn't or special changes I might need to make. I'm gonna venture on in and see what happens. :P
Mark
Julian Knight
Mar 5, 2017, 10:27:25 AM3/5/17
to Node-RED
You might want to reach out to Pete Scargill @ http://tech.scargill.net/
I think he's been playing with steelseries too recently.
mark hubrich
Mar 5, 2017, 12:11:18 PM3/5/17
to node...@googlegroups.com
i mention the steelseries because i was thinking i could use the three.js library the same way. Based on a cube example I'm trying use my acceleration X and Y values to roll the cube on the 2 axis. if i can make that work the cube will be replaced with a little car model. Using this to visualize body roll would be pretty sweet :)
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/dTutUVqXa8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/abfbd731-a84e-4e4a-bffe-f6c0cee63710%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
mark hubrich
Mar 5, 2017, 1:56:38 PM3/5/17
to node...@googlegroups.com
It works.. kinda.. It wants to take the whole screen and doesn't like using a CDN.
[{"id":"f2e61329.7d519","type":"template","z":"b18c0a01.bdb9f8","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<!DOCTYPE html>\n<html>\n\t<body>\n\n\t\t<script src=\"../three.js\"></script>\n\n\t\t<script>\n\n\t\t\tvar camera, scene, renderer;\n\t\t\tvar mesh;\n\n\t\t\tinit();\n\t\t\tanimate();\n\n\t\t\tfunction init() {\n\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );\n\t\t\t\tcamera.position.z = 400;\n\n\t\t\t\tscene = new THREE.Scene();\n\n\t\t\t\tvar texture = new THREE.TextureLoader().load( '../textures/crate.gif' );\n\n\t\t\t\tvar geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );\n\t\t\t\tvar material = new THREE.MeshBasicMaterial( { map: texture } );\n\n\t\t\t\tmesh = new THREE.Mesh( geometry, material );\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\trenderer = new THREE.WebGLRenderer();\n\t\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\tdocument.body.appendChild( renderer.domElement );\n\n\t\t\t\t//\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t}\n\n\t\t\tfunction animate() {\n\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\tmesh.rotation.x += 0.005;\n\t\t\t\tmesh.rotation.y += 0.01;\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n\n\t\t</script>\n\n\t</body>\n</html>","x":1022.5000228881836,"y":585.0000257492065,"wires":[["993e12e9.a85cf"]]},{"id":"769baee1.1da76","type":"inject","z":"b18c0a01.bdb9f8","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"x":855.2380523681641,"y":585.714277267456,"wires":[["f2e61329.7d519"]]},{"id":"993e12e9.a85cf","type":"ui_template","z":"b18c0a01.bdb9f8","group":"1b52a294.dc93fd","name":"","order":5,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":false,"fwdInMessages":false,"x":1234.4444999694824,"y":584.4443855285645,"wires":[[]]},{"id":"1b52a294.dc93fd","type":"ui_group","z":"","name":"three","tab":"994601e4.5e75f","disp":true,"width":"6"},{"id":"994601e4.5e75f","type":"ui_tab","z":"","name":"Three","icon":"dashboard","order":6}]
Nicolas Lassabe
Mar 12, 2017, 6:17:16 PM3/12/17
to Node-RED
Hello,
I tried you flow with three.js I just changed the link to the three.js lib to upload it directly online. But it is doesn't work. The code works inside a html page but not in red node. I miss something ?
So an error with the texture. I remove the texture and it works. I dont know why I cannot have the texture working. Any idea?
Nicolas
{"id":"42395b85.0ce904","type":"template","z":"5e8fa663.ceee98","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"plain","template":"<!DOCTYPE html>\n<html>\n\t<body>\n\n\t\t<script src=\"https://threejs.org/build/three.js\"></script>\n\n\t\t<script>\n\n\t\t\tvar camera, scene, renderer;\n\t\t\tvar mesh;\n\n\t\t\tinit();\n\t\t\tanimate();\n\n\t\t\tfunction init() {\n\n\t\t\t\tcamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );\n\t\t\t\tcamera.position.z = 400;\n\n\t\t\t\tscene = new THREE.Scene();\n\n\t\t\t\tvar texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' );\n\n\t\t\t\tvar geometry = new THREE.BoxBufferGeometry( 400, 400, 400 );\n\t\t\t\tvar material = new THREE.MeshBasicMaterial( { map: texture } );\n\n\t\t\t\tmesh = new THREE.Mesh( geometry, material );\n\t\t\t\tscene.add( mesh );\n\n\t\t\t\trenderer = new THREE.WebGLRenderer();\n\t\t\t\trenderer.setPixelRatio( window.devicePixelRatio );\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\t\t\t\tdocument.body.appendChild( renderer.domElement );\n\n\n\t\t\t\twindow.addEventListener( 'resize', onWindowResize, false );\n\n\t\t\t}\n\n\t\t\tfunction onWindowResize() {\n\n\t\t\t\tcamera.aspect = window.innerWidth / window.innerHeight;\n\t\t\t\tcamera.updateProjectionMatrix();\n\n\t\t\t\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n\t\t\t}\n\n\t\t\tfunction animate() {\n\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\tmesh.rotation.x += 0.005;\n\t\t\t\tmesh.rotation.y += 0.01;\n\n\t\t\t\trenderer.render( scene, camera );\n\n\t\t\t}\n\n\t\t</script>\n\n\t</body>\n</html>","x":750,"y":700,"wires":[["b502d45f.a56e98"]]},{"id":"b42ead3e.654988","type":"inject","z":"5e8fa663.ceee98","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"x":582.7380294799805,"y":700.7142515182495,"wires":[["42395b85.0ce904"]]},{"id":"b502d45f.a56e98","type":"ui_template","z":"5e8fa663.ceee98","group":"572c8c8e.b2043c","name":"","order":5,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":false,"fwdInMessages":false,"x":961.9444770812988,"y":699.4443597793579,"wires":[[]]},{"id":"572c8c8e.b2043c","type":"ui_group","z":"","name":"three","tab":"62f7bf13.005638","disp":true,"width":"12"},{"id":"62f7bf13.005638","type":"ui_tab","z":"","name":"Three","icon":"dashboard","order":6}]
mark hubrich
Mar 13, 2017, 8:02:48 AM3/13/17
to node...@googlegroups.com
I had to change the reference to the texture as it couldn't be found. I had to hunt through and find it then copy it to a location that node red has access to.
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/dTutUVqXa8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/888e70d3-7b54-4e9b-8b77-0812ccdaad24%40googlegroups.com.
Zenofmud
Mar 13, 2017, 8:42:36 AM3/13/17
to node...@googlegroups.com
I have a slightly off topic but related question - I see in the function you have
<script src="../three.js"></script>
so where would you put the three.js file? In the .node-red folder? in the root folder?
When I try the sample, I’ve put three.js in both places and get a’not found’ and haven’t been able to work out where it goes and haven’t been able to find out using my friend google.
-Paul
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CALqZgzQh2t8rrNJy%3DodDYHpBT28B3CKBo5p9FpRtsAtfBxGBUQ%40mail.gmail.com.
mark hubrich
Mar 13, 2017, 9:59:32 AM3/13/17
to node...@googlegroups.com
It think it was in the .node-red folder. Since then I made a new folder called "static" and now I place that stuff in there. I haven't done anything with it since then but I will soon get back to it so I can create a pitch and roll indicator. If you read through many of the posts at http://tech.scargill.net/ that's what I used to make it work. He explains how he made external libraries available to Node-Red. I plan to go back and study again how he created his scope function to get the data into it. I didn't get that far as I just wanted to see at the time if there was even a hint that it would work.
There is a file called settings.js in the .node-red folder I edited to point to my static folder..
// When httpAdminRoot is used to move the UI to a different root path, the// following property can be used to identify a directory of static content// that should be served at http://localhost:1880/.httpStatic: '/home/unit32/.node-red/static/',// The maximum size of HTTP request that will be accepted by the runtime api.// Default: 5mb//apiMaxLength: '5mb',
unit32@unit32:~/.node-red$ ls static/98jetta.fbx highcharts.js js steelseries-min.js.mapadapters highcharts-more.js lib texturesbower.json highcharts-more.src.js modules themesChart.bundle.min.js highcharts.src.js package.json three-cdncss highmaps.js README.md three.jsdemo.manifest highmaps.src.js SteelSeries-Canvas tween.jshighcharts-3d.js highstock.js steelseries.js tween-min.jshighcharts-3d.src.js highstock.src.js steelseries-min.jsunit32@unit32:~/.node-red$
Here's what my script reference looks like now...except this example is me playing with Highcharts.js...
<!DOCTYPE html>
<html>
<body>
<script src="/highcharts.js"></script>
<script src="/modules/exporting.js"></script>
<div id="container" style="min-width: 325px; height: 200px"></div>
<script>
// (function(scope){
// scope.$watch('msg', function(msg) {
// mine1.graph(msg.payload);
// });
// })(scope);
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'areaspline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 5,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50
},
yAxis: {
title: {
// text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
</script>
</body>
</html>
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CALqZgzQh2t8rrNJy%3DodDYHpBT28B3CKBo5p9FpRtsAtfBxGBUQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/dTutUVqXa8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/DA08592A-B8B9-4687-B103-1399D17D8CE8%40zenofmud.org.
Nicolas Lassabe
Mar 14, 2017, 8:08:34 PM3/14/17
to Node-RED
I dont understand why my code doesn't work. The link to the texture is correct. This code should works for everyone without local file. Could you try it?
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.
mark hubrich
Mar 15, 2017, 1:51:54 PM3/15/17
to Node-RED
My first initial guess would be the "https" in your source link. I have no idea if Node-Red has provisions for this or not but I thought I'd bring it up.
I used the dev features of Chrome to help me figure things out. One major issue I see is...
ReferenceError: THREE is not definedat init (eval at globalEval (app.min.js:20), <anonymous>:9:18)at eval (eval at globalEval (app.min.js:20), <anonymous>:4:4)at eval (<anonymous>)at Function.globalEval (app.min.js:20)at ua (app.min.js:21)at n.fn.init.append (app.min.js:21)at n.fn.init.<anonymous> (app.min.js:21)at K (app.min.js:20)at n.fn.init.html (app.min.js:21)at app.min.js:302
Actually, I changed your flow to aim at my local copy and it worked fine.
<script src="/three.js"></script>
...
var texture = new THREE.TextureLoader().load( '/textures/crate.gif' );
Well with only 2 warnings anyways..
Use of the Application Cache is deprecated on insecure origins. Support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
:1880/ui/#/0:1 Document was loaded from Application Cache with manifest http://fragnastika.com:1880/ui/dashboard.appcache
:1880/ui/#/0:1 Application Cache Checking event
:1880/ui/#/0:1 Application Cache NoUpdate event
app.min.js:486Rendered http://fragnastika.com:1880/ui/css/app.min.less successfully.
app.min.js:486CSS for http://fragnastika.com:1880/ui/css/app.min.less generated in 208ms
app.min.js:486Less has finished. CSS generated in 208ms
app.min.js:486Rendered http://fragnastika.com:1880/ui/css/app.min.less successfully.
app.min.js:486CSS for http://fragnastika.com:1880/ui/css/app.min.less generated in 21ms
app.min.js:486Less has finished. CSS generated in 21ms
app.min.js:22 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ app.min.js:22
(unknown) THREE.WebGLRenderer 85dev
(unknown) THREE.WebGLRenderLists: 4,3
steve rickus
Mar 15, 2017, 2:17:42 PM3/15/17
to Node-RED
Often, when I try to include third-party libraries from outside web sites, I run into issues like this. I believe it is due to the code from the remote site being loaded asynchronously while the included script has already started to run. This creates a race condition that sometimes fails, if the call to the library happens before the library has been fully loaded.
You can check to see if this is the problem you are having, by putting a delay into the local script (i.e. start running after a few seconds instead of immediately when the page is loaded). This timing issue becomes even more hard to control with the node-red dashboard logic, which is based on angular models and events. As Mark mentions, it is much more reliable to serve the libraries from your own local server instance.
mark hubrich
Mar 16, 2017, 3:18:29 PM3/16/17
to Node-RED
I have been poking around Google a bit to learn how to use Three.js and I found THIS. Its called WhitestormJS.
I did manage to figure out how to get a 3D model into my scene... Yes that's a VW Jetta :) I can't figure out how to get flow data into it though. I want it to roll about the X and Y axis based on accelerometer data. Basically I'd like to use it to visualize body roll during hard cornering and braking.
Anyways it has Three.js in it simplified with modules and also physics library which three.js does not have by itself. I'm going to try the NPM install route and see what I can do with it.
I can envision this as pretty fun nodes for Node-Red. Maybe if I gain enough knowledge someday I'll give it a shot if nobody else does it.
Mark
Hugo Desmeules
Mar 17, 2017, 12:03:15 AM3/17/17
to Node-RED
Looks really promising! I'd love to try to figure it out, right now I'm trying to get at where you're at, but presently stuck with some errors.
If there's some code and flow you can share, that might be handy to kickstart experiments.
Looking forward to get some interactive 3D in Node-Red!
mark hubrich
Jan 6, 2018, 10:59:41 PM1/6/18
to Node-RED
So I'm back at the point just before I got this working. I'm starting completely from scratch. I'll take notes and share. I hope to create some nodes and figure it all out. It would be really cool to get data in node-red to manipulate 3D objects on a canvas.
mark hubrich
Jan 7, 2018, 12:03:35 AM1/7/18
to node...@googlegroups.com
Here's where I started. It explains how to access scripts from within node-red. I'm noting it here because I already forgotten and had to start over. 😁
From there I followed through trying to make the gauges work on next posts.
On Jan 6, 2018 9:59 PM, "mark hubrich" <meis...@gmail.com> wrote:
So I'm back at the point just before I got this working. I'm starting completely from scratch. I'll take notes and share. I hope to create some nodes and figure it all out. It would be really cool to get data in node-red to manipulate 3D objects on a canvas.
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/dTutUVqXa8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send an email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/0d113849-3339-4a77-965a-272602378df2%40googlegroups.com.
Bart Butenaers
Jan 7, 2018, 11:05:15 AM1/7/18
to Node-RED
Hi guys,
I have not used threejs in the dashboard, but just did a simple test in the Node-Red flow editor.
SO IT IS NOT REALLY AN ANSWER TO THIS THREAD, BUT IT MIGHT BE USEFUL FOR OTHER CASES/USERS ...
These are the steps I executed:
1) I created the html and js files for my new custom node. To test them, I putted them in my 'nodes' folder.
2) I downloaded the zip file from https://threejs.org/
3) I created a 'lib' folder in the same 'nodes' folder, and extracted all the required files from the zip file into this 'lib' folder:
The minimum you require is the three.min.js file.
I added the other files, because otherwise I got errors for these in my Chrome developer tools console window:
5) I added for any of these files an include in my custom node html file (i.e. tank_volume.html file):
<script src="/tank_volume/js/three.min.js"></script>
<script src="/tank_volume/js/CanvasRenderer.js"></script>
<script src="/tank_volume/js/Projector.js"></script>6) I added a tag somewhere (e.g. with id = 'container') where I want to put the image in my html file:
<script type="text/x-red" data-template-name="tank-volume">
<div class="form-row" id="container">
<label> </label>
</div>7) I added in the html file some code to draw some 3D stuff under that 'container' tag:
oneditprepare: function() {
var containerElement = $("#container");
// renderer
var renderer = new THREE.CanvasRenderer( { clearColor: 0x000000 } );
renderer.setSize( 300, 300 );
container.appendChild( renderer.domElement );
// scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// camera
var camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(16, 8, 16);
camera.lookAt( scene.position );
scene.add(camera);
// material
var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
// geometry
var geometry = new THREE.CubeGeometry( 3, 4, 8, 2, 3, 4 );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// render
renderer.render( scene, camera );8) I added following code in my custom node js file (i.e. tank_volume.js file):
RED.nodes.registerType("tank-volume",TankVolumeNode);
// Make all the static resources from this node public available (i.e. third party JQuery plugin tableHeadFixer.js).
RED.httpAdmin.get('/tank_volume/js/*', function(req, res){
var options = {
root: __dirname + '/lib/',
dotfiles: 'deny'
};
// Send the requested file to the client (in this case it will be tableHeadFixer.js)
res.sendFile(req.params[0], options)
}); For every src in my html fie, I will arrive here.
Here we simply say that thle resources is located under the lib directory!
9) And when I refresh the flow editor in the browser, the 3D drawing nicely appears in my custom node's config screen:
Kind regards,
Bart Butenaers
mark hubrich
Jan 8, 2018, 7:08:20 PM1/8/18
to node...@googlegroups.com
thats kinda mind blowing.
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/dTutUVqXa8k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/34320abf-76c6-4a3f-bd7d-51e3ad3b490b%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages