nglviewer
Using ngl.js with three.js?
I'm new to Javascript and three.js. But I've put together some three.js code which works well, and I'd like to add capabilities that ngl.js provides. Since nil.js uses three.js, it seems like it should be possible.
It is possible to do that? I want to display both my non-ngl objects and nil molecules in the same "scene." I'd prefer that three.js "drive" in a three.js "scene-based" approach, but if ngl.js drives and I can add my own objects to its stage, that would work. Or?
I'm sure the answer is in the code, but perhaps someone has done this already, or has some ideas?
Thanks in advance!
Hi; yes, I'm doing this now. You probably want to use the latest ngl master branch, and when you build NGL for your project, use the dist/ngl.esm.js build that relies on three.js as an external. (If you use the other builds with three.js built in, you'll have problems due to two copies of the lib.)
It's probably best to stick to the same version of three.js that NGL uses, which is currently 0.118.0. If you want to use a more recent three.js, "patches gratefully accepted" as they say! ;-)
Thank you! I think that it's not difficult to add my objects (or NGL objects) to a scene. But how to animate that scene is not obvious to me -- meaning having both NGL objects and my own objects simultaneously being animated. I sheepishly admit that I have not studied the NGL documentation carefully. I did look for an example and/or for some sort of "hook" I could use, but I didn't find (or recognize) what I'm looking for.
I don't need NGL molecules to interact with my objects -- I just need them to co-exist. (I may need interactions later.)
I don't mean to be a pain, but do you have a simple code example you could share? Ideally it would include an NGL molecule doing something or other and a cube or sphere being animated separately (independently of NGL).
Again, thanks for your help!
Hi; I can't share a working code sample, sorry, but you can add your objects to the scene in stage.viewer.scene, and then set up an onTick method like this:
stage.viewer.signals.ticked.add( (args: TickArgs) => {
this.onTick(args)
})
and you may also want
stage.viewerControls.signals.changed.add(this.onViewerControlsChanged)
and then:
private onTick(args: TickArgs) {
// args: currentTime, startTime, count, frames, lastDuration, lastFps, etc.
// animate your scene objects here
...
}
Thanks so much: I'll try it.
On Thu, Jun 17, 2021 at 7:26 PM GaryO @.***> wrote:
Hi; I can't share a working code sample, sorry, but you can add your objects to the scene in stage.viewer.scene, and then set up an onTick method like this:
stage.viewer.signals.ticked.add( (args: TickArgs) => { this.onTick(args) })and you may also want
stage.viewerControls.signals.changed.add(this.onViewerControlsChanged)and then:
private onTick(args: TickArgs) { // args: currentTime, startTime, count, frames, lastDuration, lastFps, etc. // animate your scene objects here ... }
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-863664184, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJLAMV62WCO56UFTQ5GRUTTTKOC3ANCNFSM46O2F4KQ .
Well, I've given it the "old college try" for ~7-8 hours today and so far, complete failure. I can add a THREE.Object3D to the stage, but it doesn't show up, and consequently I can't animate it.
I tried your suggestion of using the latest ngl.esm.js, but I can't get it to load and import properly. After I modify it -- changing import filenames by prepending './', it finds three.js and the other libraries it wants to import -- and then it loads, but it doesn't provide the ' NGL' symbol, so I still can't use it. I can't find a code example using ngl.esm.js to use as a working starting point.
I've gotten further with ngl.dev.js and ngl.js, but not much. I find examples using those codes and Javascript doesn't complain when I do stage.viewer.scene.add (my_three_js_obj). But the object doesn't appear even then. (Since I can't see my object on the stage, there's no point in trying to animate.) So I was wrong when I stated earlier that I don't think it's difficult to add objects to the stage. I've tried all the obvious (to me) possibilities, but none worked.
I've looked at the ngl documentation more closely, and the designers provide some capabilities to add one's own objects. However, the documentation is too sketchy to motivate me to try that path -- and, again, I can not find any sufficiently general example. (There is a NGL.shape.addMesh function, which might work for me, and even an example of using that function in component/shape at http://nglviewer.org/ngl/gallery/ . But it doesn't appear to be what its name implies: it seems to merely provide a box with bounds calculated from a set of points. An actual addMesh function which takes a general mesh, or a THREE.Object3D, or which loads an .obj file would be great, but it's not there (or I can't find it. It's hard for me to believe that the addMesh function isn't more general, but I've studied both its code and the example of using it, and I think it's just a placeholder.)
I do appreciate your suggestions, but, unfortunately, my inexperience prevents me from using them to advantage.
For my present needs, I don't need an accurate molecular model. A simplified surrogate suffices, and I'll go that route, without ngl.js. If inspiration sometime later occurs, I may try ngl.js again -- and perhaps I'll even take a shot at adding the functionality I want but can't find -- but, for now, I've reached my frustration limit.
Sorry to hear that, and you're absolutely right that we need a sample of using ngl.esm.js (it's quite new, and using it requires a module-based framework so it doesn't slot neatly into the existing example framework, as you discovered). I'll see if I can create a small project to do this. Out of curiosity, are you using a bundler (webpack/rollup) or are you going "bundleless" (relying on ES6 native browser support) for modules?
I'm still a novice (which I'm sure is no surprise). I expect I'm going "bundleless." I use VS Code with the "Live Server" extension, and use the Javascript console in the browser (usually Safari, for me) to debug. Live Server automatically reloads after saving changes in source code,which provides a relatively efficient debugging process. I find it a simple and pleasant coding environment. (Do you have a better suggestion?)
After a lot of grief, I learned how to use the Javascript "import" statement. That required a lot of changes to my starting code, but I like the new code better, so I plan to write using modules by default from now on.
Also, I'm new to three.js (again, big surprise) and find that it's still a struggle to get things to work as I want. Three.js's revision model means that one can't just combine different examples (which probably use different revisions) and expect things will work. Code changes are frequent between revisions and make life more complicated than it could be. Very little is documented adequately, so one has to do a lot of things by educated guessing and by trial and error. (Not your issues, of course, but I'm curious if you have the same experience.)
Thanks for putting together an ngl.esm.js example: I'll try it. I'm making some progress my alternate way, but unsurprisingly, that's not going smoothly, either.
BTW, my wife says I complain about everything. Re-reading my note here, perhaps she's right.
On Sun, Jun 20, 2021 at 4:09 AM GaryO @.***> wrote:
Sorry to hear that, and you're absolutely right that we need a sample of using ngl.esm.js (it's quite new, and using it requires a module-based framework so it doesn't slot neatly into the existing example framework, as you discovered). I'll see if I can create a small project to do this. Out of curiosity, are you using a bundler (webpack/rollup) or are you going "bundleless" (relying on ES6 native browser support) for modules?
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-864530194, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJLAMRH2J4IZB275ASHDXDTTW44LANCNFSM46O2F4KQ .
Hi, A related question from me (which I mistakenly posted on a closed forum) My project is a small javascript file that uses NGL to display some geometric primitives (balls, cylinders etc.). That has worked fine. Now I also want to use some other features of three.js. But as I don't have much experience with importing JavaScript files (or is it modules?) from inside other JavaScript files I have had no luck in doing so with the build of NGL that does not include three.js. I pulled sources from here and built it yesterday on my PC.
The script tags in my HTML file looks like:
<script src="file:///c:/users/oeffner/three.js" type="text/javascript"></script>
<script src="file:///c:/users/oeffner/ngl.umd.js" type="text/javascript"></script>
<script src="file:///c:/users/oeffner/HKLJavaScripts.js" type="text/javascript"></script>
and the subsequent errors I get from the browser are:
`ngl.umd.js:1019 Uncaught TypeError: Cannot read property 'Color' of undefined at ngl.umd.js:1019 at ngl.umd.js:4 at ngl.umd.js:5 HKLJavaScripts.js:30 Uncaught TypeError: NGL.Shape is not a constructor at HKLJavaScripts.js:30
` Accessing objects from THREE from within HKLJavaScripts.js does work though. But it seems that NGL fails to do so. I also tried using ngl.esm.js instead of ngl.umd.js but just a different set of errors. Am I using the wrong javascript files?
Thanks in advance,
Rob
@garyo, @m-bob would any of you have a suggestion for a working html sample script that loads three.js as an external module for ngl so that objects from THREE may be used together with ngl? Is it necessary to compile a bundle to get this to work?
I'm working on a simple example of this. Hope to have it in a few days. It'll use webpack.
On Tue, Aug 10, 2021 at 1:35 PM Robert Oeffner @.***> wrote:
@garyo https://github.com/garyo, @m-bob https://github.com/m-bob would any of you have a suggestion for a working html sample script that loads three.js as an external module for ngl so that objects from THREE may be used together with ngl? Is it necessary to compile a bundle to get this to work?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-896180298, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABCFR4ZIFLRPS6DDFCFKGTT4FPMPANCNFSM46O2F4KQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .
-- Gary Oberbrunner Founder & CEO BioViz Studio https://www.bioviz-studio.com from Dark Star Systems, Inc https://darkstarsystems.com. [image: LinkedIn] https://www.linkedin.com/company/darkstarsystems https://twitter.com/darkstarsystems https://instagram.com/darkstarsystems https://www.facebook.com/darkstarsys
Hi Rob,
I'm sorry I can't help. I'd love to have such an example to play with. For now, I'm looking into babylon.js as an alternative to THREE.js . I had terrific experiences with THREE when I was just starting; everything worked as I expected. But my recent experiences have been frustrating. The update model for THREE means you can't mix-and-match examples of different functionalities, because each functionality may require a specific update of THREE to work, and may be incompatible with the update needed to get something else to work. That's been my experience repeatedly. I can get something to work using one version. I can get something else to work using another version. But I can't get both things to work in any single version. Ngl is an example. But even something as simple as loading a glTF file in THREE can become an ordeal, if there's another capability you need at the same time.
I haven't yet started with babylon.js . The first thing I need to find out is whether I can use it with pure javascript or if I need to use typescript. I'm not averse to learning typescript, but I can now develop javascript and THREE.js in a very nice manner using VSCode and the VSCode Live Server extension. Nothing else is needed. Edits to the javascript source in the VSCode editor show up immediately in the rendered pages. I really like it. I don't want to be forced to use a more cumbersome setup.
So, if some example combining THREE objects and ngl is made available, I'm still interested despite my increasing disenchantment with THREE.
Murray
On Tue, Aug 10, 2021 at 11:35 AM Robert Oeffner @.***> wrote:
@garyo https://github.com/garyo, @m-bob https://github.com/m-bob would any of you have a suggestion for a working html sample script that loads three.js as an external module for ngl so that objects from THREE may be used together with ngl? Is it necessary to compile a bundle to get this to work?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-896180298, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJLAMXNE6WZH736C76XPMLT4FPMPANCNFSM46O2F4KQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .
Awesome! Thank you!
On Tue, Aug 10, 2021 at 2:57 PM GaryO @.***> wrote:
I'm working on a simple example of this. Hope to have it in a few days. It'll use webpack.
On Tue, Aug 10, 2021 at 1:35 PM Robert Oeffner @.***> wrote:
@garyo https://github.com/garyo, @m-bob https://github.com/m-bob would any of you have a suggestion for a working html sample script that loads three.js as an external module for ngl so that objects from THREE may be used together with ngl? Is it necessary to compile a bundle to get this to work?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-896180298, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AABCFR4ZIFLRPS6DDFCFKGTT4FPMPANCNFSM46O2F4KQ
. Triage notifications on the go with GitHub Mobile for iOS < https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675
or Android < https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email
.
-- Gary Oberbrunner Founder & CEO BioViz Studio https://www.bioviz-studio.com from Dark Star Systems, Inc https://darkstarsystems.com. [image: LinkedIn] https://www.linkedin.com/company/darkstarsystems https://twitter.com/darkstarsystems https://instagram.com/darkstarsystems https://www.facebook.com/darkstarsys
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-896311451, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJLAMTMXZ5Y6YUAXJS2EQLT4GHEDANCNFSM46O2F4KQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .
Thank you to both of you. I've been banging my head against this for some days now. First I thought it was a simply problem (and maybe it is) to access some of the functionality of three.js outside ngl. But I'm still learning from scratch when it comes to importing modules in other javascript files.
@garyo, @Oeffner, I just realized that another possible way to mix ngl representations with "outside" objects is to do it "backwards." If we could export an ngl representation as a glTF model, we could then (in theory, anyway) import the glTF model into a three.js (or babylon.js, or blender, or ...) project of our choosing and thereby mix ngl models with our own.
Is this route do-able? Can one export an ngl model to a glTF model?
@garyo, @Oeffner, I just realized that another possible way to mix ngl representations with "outside" objects is to do it "backwards." If we could export an ngl representation as a glTF model, we could then (in theory, anyway) import the glTF model into a three.js (or babylon.js, or blender, or ...) project of our choosing and thereby mix ngl models with our own.
Is this route do-able? Can one export an ngl model to a glTF model?
Yes, I'm doing this (see https://bioviz-studio.com). But you have to have a functional three.js module to do the export, so I'm not sure it helps your use case. I'm using the three.js glTF exporter in examples.
Thanks, Gary! I'll try to do something along those lines. Your bioviz-studio site is beautiful! I'll look at it more carefully over the next few days. I hope it's a big success!
On Sun, Aug 22, 2021 at 7:25 AM GaryO @.***> wrote:
@garyo https://github.com/garyo, @Oeffner https://github.com/Oeffner, I just realized that another possible way to mix ngl representations with "outside" objects is to do it "backwards." If we could export an ngl representation as a glTF model, we could then (in theory, anyway) import the glTF model into a three.js (or babylon.js, or blender, or ...) project of our choosing and thereby mix ngl models with our own.
Is this route do-able? Can one export an ngl model to a glTF model?
Yes, I'm doing this (see https://bioviz-studio.com). But you have to have a functional three.js module to do the export, so I'm not sure it helps your use case. I'm using the three.js glTF exporter in examples.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nglviewer/ngl/issues/872#issuecomment-903268760, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJLAMWN7KGD7PI34NIME6DT6D3ENANCNFSM46O2F4KQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .