jQuery no-conflict mode + docker + implementing 3DHOP in Clowder

[felmab]

3DHOP calls the jQuery function by using the $ alias. However, in order to be fully compatible with all systems which could implement this library, it would be better to switch to no-conflict mode and always call explicitly jQuery. For instance, Drupal uses jQuery in no-conflict mode, which makes it difficult to include files which use the $ symbol.

[cconsta1]

Hi, I'm trying to integrate 3DHOP into clowder. And I think I'm running into the same issue you mention here. However, I'm not familiar with JavaScript at all so I don't know how to implement the noConflict function. It'll be nice if I can get some guidance.

[felmab]

@cconsta1 I had to replace all occurrences of the $ object with jQuery in the js/ folder. Pay attention not to blindly replace replace all $ signs as you could run into trouble, e.g. don't mess with spidergl.js which has nothing to do with jQuery AFAIK. This of course is not optimal as you'll have to repeat this operation on upgrades.

[cconsta1]

Hi @felmab and thank you very much! So basically, I have to replace $ with jQuery in the files init.js and jquery.js? I want to implement a quick and dirty solution to make sure things work for now. Thanks again!

[felmab]

@cconsta1 maybe not jquery.js. Besides, you're already including a copy of it in your website, not sure including it twice would be so great (I hope there'll be no version mismatch though). Take a look at your browser console in case of errors.

[cconsta1]

Hi @felmab, I'm still trying to get things to work. So, I did change all occurrences of $ with jQuery inside init.js but I think I messed things up somehow and 3DHOP doesn't work inside clowder. I'm really new to JavaScript so I proceed via trial and error. I created a repository called viewer_hop btw, in case you want to take a look at what I'm doing.

[felmab]

@cconsta1 what messages appear in the browser console before and after you replace those occurrences?

[cconsta1]

This is the before log (with init.js): localhost-1592420450587.log

And this is the after (with $ replaced with jQuery in init.js): localhost-1592420574865.log

[felmab]

@cconsta1 I'm not sure you've run into the issue as me. I had errors like "$ is not a function", while you get some like "$(...).tab is not a function", which IMHO could be related to Bootstrap or jQuery UI, or some kind of incompatibility between libraries.

[cconsta1]

Hi @felmab. So I made a few changes to my code with the main one adding this line right after loading jquery.js (the 3DHOP version):

$(useTab).append('<script>var $oldjQuery = $.noConflict(true);</script>') You can find my code here.

I also created a custom init_custom.js file in which I replaced $ in init.js with $oldjQuery (in the custom file).

With the new changes, I only get one error. This one:

Uncaught ReferenceError: SGL_TRACKBALL_NO_ACTION is not defined

I'll continue working until I get a new idea. Thanks for all the help!

[potenziani]

Hi guys,

the jQuery issue should be solved with 3DHOP 4.3 (just released). Enjoy it! ;)

[felmab]

@potenziani this is great news! Thanks!

[cconsta1]

Hi @potenziani. Thanks for letting us know. My problem still persists though. :( Can you guys point at the Drupal code so I can compare notes?

[potenziani]

Hi @cconsta1 , I do not have experience with Clowder, so my help can be only partial, but your issue seems not to be related to jQuery...

However, to be sure, since 3DHOP uses jQuery only for the interface, you could try to remove it, moving to a barebone implementation of our viewer (take a look at the example in the attached archive).

3DHOP.zip

If after this test your issue persists, I suggest you open a new and more focused issue (something like "Implementing 3DHOP in Clowder"). This could help other users in helping you.

[cconsta1]

Hi @potenziani! Thank you for sending me this basic version of 3DHOP. It turns out that the problem I was facing had nothing to do with 3DHOP, clowder, or jQuery. It was related to docker. Specifically, I use docker to run clowder inside containers. So what happened was that when I was copying 3DHOP from my local machine to docker, ^M was added at the end of each line in every file. This is an old issue related to creating files in windows and transferring them to a UNIX like system (this happened to me once, 12 years ago, when I started learning to code). To catch that error I had to open the files using vi because the problem did not appear when I was looking into the files using more.

The only minor thing that I had to take care of indeed was that the following (global) variables are declared as const in 3DHOP:

const SGL_TRACKBALL_NO_ACTION = 0; const SGL_TRACKBALL_ROTATE = 1; const SGL_TRACKBALL_PAN = 2; const SGL_TRACKBALL_DOLLY = 3; const SGL_TRACKBALL_SCALE = 4;

I had to change these to:

var SGL_TRACKBALL_NO_ACTION = 0; var SGL_TRACKBALL_ROTATE = 1; var SGL_TRACKBALL_PAN = 2; var SGL_TRACKBALL_DOLLY = 3; var SGL_TRACKBALL_SCALE = 4;

These variables are defined inside presenter.js. I read online that some browsers do not read const variables, including Chrome and Firefox which I used for the testing.

Thank you guys for all your help! :)

[potenziani]

Happy to see that you found a solution @cconsta1!

From our side, we will review the use of the JavaScript keyword const in 3DHOP, so every once in a while take a look at the DEV branch of the code to be aligned with all the next updates!

[cconsta1]

Hi again! Is it possible to ask another question in a closed subject? If yes here is my current implementation:

$(useTab).append('<script> \n' +
    'var presenter = null; \n \n' +

    'function setup3dhop() { \n' +
     'presenter = new Presenter("draw-canvas");  \n' +

      'presenter.setScene({ \n' +

          'meshes: { \n' +
              "\"mesh_1\" : { url: " + "\"" + referenceUrl + "\"" + "} \n" +
          '}, \n' +
          'modelInstances : { \n' +
              '"instance_1" : { mesh : "mesh_1" } \n' +
          '} \n' +
      '}); \n' +
    '}; \n' + 

    'init3dhop(); \n' +

    'setup3dhop(); \n' +

    'resizeCanvas(640,480); \n' +

    'document.getElementById(\'draw-canvas\').setAttribute(\'width\', document.body.clientWidth); \n' +
    'document.getElementById(\'draw-canvas\').setAttribute(\'height\', document.body.clientHeight); \n' +
    '</script>'
    );

The problem is that var referenceUrl = Configuration.url holds the URL to a .ply file uploaded to the server. The address though is something like /file/id_number/blob/, i.e., the name of the file and the extension does not appear anywhere. If I type in the address manually, the ply file starts downloading. I suspect that because of this the file does not appear. So what am I doing wrong?

[potenziani]

Hi again @cconsta1, this could be due to the fact that 3DHOP uses files extension to understand if you are loading a PLY or a NEXUS model.

However, declaring a geometry in SetScene, you can force a specific mesh type, setting the mType parameter to the nexus or ply value.

For instance, in your case:

meshes: {
    "mesh" : {
          url            : "...",
          mType     : "ply",
          transform : {...}
    }
}

Of course, if you decide to not use the mType field, by default 3DHOP will try to get this information from the file extension (if any).

I hope this could work for you. If not, let us know.

[cconsta1]

Hi! Sorry, I forgot to respond. It works! Thanks!!

[cconsta1]

Hello again!

I returned to adapting 3DHOP on clowder and I have two additional questions it'll be great to get some help at. First of all, I'm happy to report that 3DHOP runs smoothly on the server and it can open simple singleres files such as laurana.ply, cube.ply, etc. I also implemented a few tools and everything works fine. Here is my work so far.

OK, I would like to go a step further and make my previewer do the following:

I) I want to be able to open multires .nxz files (my understanding is that these are called nexus files). The way things work on clowder is that the file is downloaded from the directory /file/id_number/blob/ as I wrote above. So I cannot distinguish between `.plyand*.nexus` files uploaded to the server. I can only work with one type of file. What would be a smart way to make 3DHOP work with either type of file uploaded to the server?

II) My colleagues want to be able to upload *.ply files which are accompanied by a texture *.jpg file such as the example I'm attaching. The way things work now, my implemented version of 3DHOP shows the outline of the chair but not the texture. How would I implement something like this given that the repository only uploads and can manage one file at a time?

Thank you in advance for any responses. I'm browsing your examples to see what I can do as well! :)

P.S: I'm gaining experience on javascript, 3D models, servers, etc as I'm working on this project so please forgive my ignorance!

california-office-chair_ply.zip

[mcallieri]

Just answering to the last point... That PLY file has been generated by an ARTEC scanner. Unfortunately, ARTEC saves the texture in a way we have never seen, and that is not standard. We were never able to work with textured files from ARTEC: since we have colleagues working with that scanner, we always export in OBJ, and then work from there (either converting it to PLY o NXS)

[cconsta1]

Hi @mcallieri and thanks for your response! I used that file as a test case I guess. Where can I find PLY files accompanied with texture JPG files which I can use for testing? Moreover, do you use meshlab to convert files? I learned about it yesterday, and I downloaded a copy on my MAC.

[cconsta1]

Hi guys, I found the answer to question I (how to find the filename from the server). I still need to figure out how to work with texture files though.

[potenziani]

Hi @cconsta1, here you have a PLY model with a texture that you can use for your tests (it is one of our test models, so you can be sure that it works).

Moving to your questions: I) already solved, am I right? We are happy you found a solution (and it would be great if you could share it with the community); II) so, you can upload on your server just 1 file at once, and this obviously is a problem if you need to upload a PLY file + its texture... The solution is not so straightforward, because in 3DHOP there is not an automatic way to decouple the loading of the 2 files, but I can give you some hint on where to look for getting what you want. The PLYs loading management is located in "presenter.js", line 2494 and 1462 (I'm referring to the current DEV version, 4.3.2). More specifically the texture loading is driven by the source code at line 1482. So basically you should modify this chunk of code, executing it only after the texture file loading... And of course, you may also want to take a look at the file actually devoted to the PLYs loading, which is "ply.js".

However, I have to say that PLY files are not the main asset of 3DHOP, so I would suggest you switch to Nexus format, that, among the various advantages also supports multiple textures directly embedded in the model's file. This open the doors also to an alternative approach, that would consist of implementing some automatic service, able to automatically convert your PLY files in Nexus, as it happens in the Visual Media Service.

[cconsta1]

Hi @potenziani! Thank you very much for your response and I apologize for the late reply.

I) So the solution is pretty simple! You can get the filename from the clowder server like this:

var fileName = $('#file-name-title').text().trim();

You can then get the filename extension like this:

var fileNameExtension = fileName.substr(fileName.length - 3);

You can then create a variable called fileType and use it to distinguish between PLY and NEXUS files:

var fileType;

  if (fileNameExtension == "ply") {
    fileType = "ply";
  }
  else if (fileNameExtension == "nxz") {
    fileType = "nexus";
 }

Then you can pass fileType into setup3dhop like this:

function setup3dhop(address, fileType) {
  presenter = new Presenter("draw-canvas");

  presenter.setScene({
    meshes: {
      "mesh_1": {
        url: address,
        mType: fileType
      }
    }

And problem solved :)

II) Thank you very much for your example file. I'll try to see what I can do. Shall I keep you guys posted?

[potenziani]

It would be great, @cconsta1! Providing helpful tips to the 3DHOP community is probably the biggest benefit of using this platform for solving issues (rather than sending direct emails)... So, any update is welcome! :)

[cconsta1]

Hi guys. I have one more question for you. The developers of clowder would like to make my 3DHOP previewer part of clowder (and I would like that very much myself).

However, because 3DHOP uses the GPL license, the only way to make the previewer part of clowder is if your libraries (the 3DHOP JavaScript code) is loaded from a remote server via some appropriate url. Is there any way we can do that?

[potenziani]

Hi @cconsta1, currently 3DHOP is available for these purposes on our institution's web server, at this URL: http://vcg.isti.cnr.it/3dhop/distribution/. The 3DHOP folders made available are "js", "skins", and "stylesheet".

Note: despite we are already using this "remote distribution" in a number of our projects, at the moment this is not a feature officially released (we want to do more tests), so possible changes could happen in the future.

[cconsta1]

Hi @potenziani and thank you for your response! Is it ok if I use this remote distribution then? As my viewer is a work in progress, I'll keep an eye for changes and official releases anyway. Since this is brought up, do you guys have an email list or newsletter so I can get informed about changes?

However, I'll need your help with the issue I run into with presenter.js. Specifically, I had to change

const SGL_TRACKBALL_NO_ACTION = 0; const SGL_TRACKBALL_ROTATE = 1; const SGL_TRACKBALL_PAN = 2; const SGL_TRACKBALL_DOLLY = 3; const SGL_TRACKBALL_SCALE = 4;

into

var SGL_TRACKBALL_NO_ACTION = 0; var SGL_TRACKBALL_ROTATE = 1; var SGL_TRACKBALL_PAN = 2; var SGL_TRACKBALL_DOLLY = 3; var SGL_TRACKBALL_SCALE = 4;

to make things work for my 3DHOP instance. How will I do that with the remote code? OK, I'll try with what you have and see what happens first though. I'll get back to you as soon as I try.

[potenziani]

@cconsta1, for sure you can use it! Unfortunately at the moment we have no mailing lists or newsletters for this kind of stuff, but usually we try to be consistent across our changes, so this shouldn't be a big problem (at worst you'll need to redefine the remote URL path in the future).

About the const issue: as far as I know, const is universally accepted (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const - https://www.w3schools.com/js/js_const.asp), so what's the problem with Clowder?

[cconsta1]

Hi @potenziani. I run into this problem when I was implementing 3DHOP on clowder using files downloaded locally on my server. So the solution was to change const to var (if you scroll up you'll find the issue). I don't know why this problem is caused though.

BTW, when I am loading the 3DHOP files from a local server I do something like this:

var s = document.createElement("script"); s.type = "text/javascript"; s.src = previewer + "/hop/js/" + "presenter.js"; $(useTab).append(s);

To load from the internet do I just do something like this? s.src = "http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js";

Moreover, I found online that if you want to change something inside a library you are loading from the internet you can use something like this:

$.ajax({ method: 'GET', dataType: 'text', url: 'http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js' }).then(function(data) { data = data.replace('const SGL_TRACKBALL_NO_ACTION = 0;', 'var SGL_TRACKBALL_NO_ACTION = 0;') data = data.replace('const SGL_TRACKBALL_ROTATE = 1;', 'var SGL_TRACKBALL_ROTATE = 1;') data = data.replace('const SGL_TRACKBALL_PAN = 2;', 'var SGL_TRACKBALL_PAN = 2;') data = data.replace('const SGL_TRACKBALL_DOLLY = 3;', 'var SGL_TRACKBALL_DOLLY = 3;') data = data.replace('const SGL_TRACKBALL_SCALE = 4;', 'var SGL_TRACKBALL_SCALE = 4;') eval(data) })

But I had no luck. I get errors like:

Uncaught ReferenceError: init3dhop is not defined

Access to XMLHttpRequest at 'http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

So what's going wrong?

[potenziani]

Ok @cconsta1 , first of all:

BTW, when I am loading the 3DHOP files from a local server I do something like this:

var s = document.createElement("script"); s.type = "text/javascript"; s.src = previewer + "/hop/js/" + "presenter.js"; $(useTab).append(s);

To load from the internet do I just do something like this? s.src = "http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js";

In a basic web page, to load the 3DHOP sources form the remote server just requires to change all the sources' path, replacing lines like this:

<script type="text/javascript" src="js/presenter.js"></script>

with this:

<script type="text/javascript" src="http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js"></script>

(check the source code of the showcase's examples in the gallery to know more).

So I guess your implementation may be right (without delving in the details of your application setup).

Then, about the const issue:

Moreover, I found online that if you want to change something inside a library you are loading from the internet you can use something like this:

$.ajax({ method: 'GET', dataType: 'text', url: 'http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js' }).then(function(data) { data = data.replace('const SGL_TRACKBALL_NO_ACTION = 0;', 'var SGL_TRACKBALL_NO_ACTION = 0;') data = data.replace('const SGL_TRACKBALL_ROTATE = 1;', 'var SGL_TRACKBALL_ROTATE = 1;') data = data.replace('const SGL_TRACKBALL_PAN = 2;', 'var SGL_TRACKBALL_PAN = 2;') data = data.replace('const SGL_TRACKBALL_DOLLY = 3;', 'var SGL_TRACKBALL_DOLLY = 3;') data = data.replace('const SGL_TRACKBALL_SCALE = 4;', 'var SGL_TRACKBALL_SCALE = 4;') eval(data) })

But I had no luck. I get errors like:

Uncaught ReferenceError: init3dhop is not defined

Access to XMLHttpRequest at 'http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

So what's going wrong?

I'm sorry but I don't know this workaround, so I'm afraid I cannot help you. As you can read, the error you got is related to the CORS policy, so you should investigate in that direction.

An alternative solution would be to change the sources from our side (it already happens in the past, so it wouldn't be the first time), replacing const with var. But to evaluate this change we need to know if the issue is structural (i.e. due to the interaction between Clowder, or another component, and 3DHOP), or if it happens because of your specific setup... Because as you can imagine, we cannot modify the source code to meet the implementation needs of each individual user's setup.

I hope you can understand.

[cconsta1]

Hi @potenziani! Yes, of course, I understand!

OK, I think I'm loading all the necessary libraries correctly now but I get an uncaught reference error. Here is what I do:

var scripts = ["spidergl.js", "corto.em.js", "corto.js", "helpers.js", "meco.js",                                                      
                  "nexus.js", "nexus.monitor.js", "ply.js", "trackball_pantilt.js",                                                      
                  "trackball_rail.js", "trackball_sphere.js", "trackball_turntable.js",                                                  
                    "presenter.js", "trackball_turntable_pan.js", "init.js"];                                                            

  // load 3dhop into the current tab                                                                                                     

  for (index = 0; index < scripts.length; index++) {                                                                                     
    var s = document.createElement("script");                                                                                            
    s.type = "text/javascript";                                                                                                                                                                                        
    s.src = "http://vcg.isti.cnr.it/3dhop/distribution/js/" +  scripts[index];                                                           
    $(useTab).append(s);                                                                                                                 
} 

I then do:

$(document).ready(function () {                                                                                                        
    init3dhop();                                                                                                                         

    setup3dhop(referenceUrl, fileType);                                                                                                  

    resizeCanvas(640, 480);                                                                                                              

    moveMeasurementbox(70,243);                                                                                                          
    movePickpointbox(70,301);                                                                                                            

    //moveToolbar(20, 20);                                                                                                               
});

where setup3dhop(referenceUrl, fileType) is a custom function I wrote. But I get this error:

Uncaught ReferenceError: init3dhop is not defined

Any ideas?

[potenziani]

It is hard to find what's wrong here... However, the error you got is the same as you would get if you didn't include the "init.js" file, so I would investigate in that direction. Perhaps the procedure you designed for loading files is not correct? Or maybe the document ready function is fired before the init.js file finishes loading?

[cconsta1]

Hi @potenziani and thank you for your response! Ok, I'm close to figuring out a solution for the problem of loading 3DHOP from your servers. Here is how I load from your servers:

var scripts = ["spidergl.js", "presenter.js", "nexus.js", "ply.js", "trackball_sphere.js",
    "trackball_turntable.js", "trackball_turntable_pan.js", "trackball_pantilt.js", "init.js"];

for (index = 0; index < scripts.length; index++) {
    scripts[index] = "http://vcg.isti.cnr.it/3dhop/distribution/js/" + scripts[index];
  }

  getScripts(scripts, function () {

    $(document).ready(function () {
      init3dhop();

      setup3dhop(referenceUrl, fileType);

      resizeCanvas(640, 480);

      moveMeasurementbox(70, 243);
      movePickpointbox(70, 301);

      //moveToolbar(20, 20);                                                                                                            
    });

  });

Here is the utility function getScripts:

function getScripts(scripts, callback) {
  var progress = 0;
  scripts.forEach(function (script) {
    $.getScript(script, function () {
      if (++progress == scripts.length) callback();
    });
  });
}

So far so good but when I run clowder I get the error:

Uncaught ReferenceError: SpiderGL is not defined

related to presenter.js (which I believe is related to using const instead of var). However, if I refresh the browser a couple of times it eventually works!! When it works no errors show up in the console!

So, I'm trying to understand why this happens. Thanks again for all the help!

[potenziani]

Glad to know you are doing progress on this, @cconsta1.

However, in my opinion, the error you got is still due to something wrong in the files loading routine (this time related to the spidergl.js file). The randomly of the error (when you reload the page) is also a clue in this direction (probably sometimes spidergl.js finishes loading before presenter.js call for it, so you get no errors... or maybe when this happens the browser is using the file version in its cache)...

In any case, if you want to do a try to be sure, I just uploaded a presenter.js file modifies (called "presenter_mod.js") in our web server, with the 5 trackball declarations modified from const to var. So, you can use it to confirm your thesis, Enjoy it! :)

[cconsta1]

Hi @potenziani! This was so nice of you to upload a file just for me but it turns out you were right! Things work perfectly fine with presenter.js. I also managed to make my code work on clowder without loading problems. My solution is ugly though:

var scripts = ["spidergl.js", "nexus.js", "ply.js", "trackball_sphere.js",                                                                 
    "trackball_turntable.js", "trackball_pantilt.js", "trackball_turntable_pan.js", "init.js", "presenter.js"]; 

$.getScript(scripts[0], function () {
    $.getScript(scripts[1], function () {
      $.getScript(scripts[2], function () {
        $.getScript(scripts[3], function () {
          $.getScript(scripts[4], function () {
            $.getScript(scripts[5], function () {
              $.getScript(scripts[6], function () {
                $.getScript(scripts[7], function () {
                  $.getScript(scripts[8], function () {

                    init3dhop();

                    setup3dhop(referenceUrl, fileType);

                    resizeCanvas(640, 480);

                    moveMeasurementbox(70, 243);
                    movePickpointbox(70, 301);

                  })
                })
              })
            })
          })
        })
      })
    })
  });

I tested my previewer on chrome (everything runs smoothly and I have no crashes), safari (same as chrome), and firefox (ply files load fine but nexus files take a few seconds -- there no crashes though).

Once again grazie mille!

[cconsta1]

HI @potenziani! I just wanted to let you know that 3DHOP is now part of clowder :)

Moreover, I was wondering about how to go about loading a ply file with a jpeg texture now that I cannot intervene in your code because I'm loading from your server.

Finally, I was wondering whether you are aware of any similar JavaScript previewers which work with fbx files. Sketchfab would have been perfect except that I can not load files from my clowder repository the same way I can with 3DHOP. It's proprietary and it only allows you to view files from their servers.

3DHOP does not support fbx files, correct?

Sorry if this is a little bit off-topic and thanks again for all the help so far :)

[potenziani]

Hi @cconsta1, that's good news for all people wanting to use 3DHOP in clowder. Well done!

Concerning the PLY/texture separate loading, the answer is the same I gave you in https://github.com/cnr-isti-vclab/3DHOP/issues/36#issuecomment-694110860... I know now you are loading 3DHOP from our server, but remember you can overwrite the methods you need to customize.

For instance, if after the presenter object declaration in your HTML file you add this:

presenter._createMeshModels = function () {
    var that = this;
    var gl = this.ui.gl;

    for(var keys = Object.keys(this._scene.meshes), i = keys.length-1; i >= 0; i--) {
        var m = keys[i];

        var mesh = this._scene.meshes[m];

        if (!mesh.url) continue;

        if (this._objectsToProcess == 0) this._testReady();
        else {
            this._objectsToProcess--;

            if(mesh.mType == null)
            {
                var ext = mesh.url.split('.').pop().split(/\#|\?/)[0].toLowerCase();
                if((ext === "nxs") || (ext === "nxz")) 
                    mesh.mType = "nexus";
                else if(ext === "ply")
                    mesh.mType = "ply";
            }

            if(mesh.mType === "nexus") {
                var nexus_instance = new Nexus.Renderer(gl);
                nexus_instance.onLoad = function () { that._onMeshReady(); };
                nexus_instance.onUpdate = this.ui.postDrawEvent;

                mesh.renderable = nexus_instance;
                nexus_instance.open(mesh.url);
            }
            else if(mesh.mType === "ply") {
                mesh.renderable = null;
                sglRequestBinary(mesh.url, {
                    onSuccess : (function(m){ return function (req) { that._onPlyLoaded(req, m, gl); }; })(mesh),
                    onProgress : (function(loaded,total,evt){
                        console.log(evt.url+" loaded: "+loaded+" of "+total);
                        if (loaded==total) console.log("Model "+ evt.url +" ready!");
                    })
                });
            }
        }
    }
}

you will have a customized _createMeshModels method able to overwrite the original one, giving you feedback on the amount of PLY data loaded (in the browser console).

Probably it won't be the most elegant solution, but it works.

PS: I'm sorry but we do not support FBX file format. Did you try with Three.js?

[cconsta1]

Hi @potenziani!

I was not familiar with function overwriting. OK then, I can try that and see what happens.

And yes, after looking and asking around I ended up figuring out I need to learn about three.js so now I have a new project ahead! :)

Thanks again!!

[cconsta1]

Hi guys,

I went to the clowder demo site to check that 3DHOP works properly now that it went online and to my disappointment, it doesn't. Here is the error message (which is repeated again and again for all files that I'm loading from your server):

Mixed Content: The page at 'https://clowder.ncsa.illinois.edu/clowder/files/5fa943bd5e0eeaa26157be3f' was loaded over HTTPS, but requested an insecure stylesheet 'http://vcg.isti.cnr.it/3dhop/distribution/stylesheet/3dhop.css'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ jquery-1.10.2.js:6050

I think it's self-explanatory (files need to be loaded from an https server.) Is there a way to circumvent this problem and make 3DHOP run properly?

Thank you in advance guys!

Edit: On chrome, I pressed the lock icon (next to the address bar), got to site settings, insecure content, allow (the default is Block). Now 3DHOP works like a charm on the browser but is there a way to bypass the need to go through the settings?

[potenziani]

Hi @cconsta1, we are planning to move 3DHOP to HTTPS in the coming weeks. This should solve your problem.

[cconsta1]

Hi @potenziani! Thanks for letting me know! Will you guys have an official announcement somewhere?

[potenziani]

It's probably not the kind of feature that deserves an official announcement on our social channels, but don't worry, we'll let you know by replying to this post

[cconsta1]

Thank you @potenziani! Hope all is well!

[potenziani]

Hi @cconsta1, this is just to inform you that 3DHOP is now experimentally available also over an HTTPS connection. You can find the usual distribution folders (js, skins, stylesheet) at this URL https://3dhop.net/distribution/latest. Enjoy and let us know if it works for your purposes.

PS: we are still defining minor details, so little changes could happen in the near future.

[cconsta1]

Hi @potenziani! Cool! Thanks for letting me know. I'll make the changes as soon as I find the time! Does the old HTTP server still work? Thanks again! :)

[potenziani]

Yes, the old server is currently still working, but we plan to shut it down in the next few weeks when the transition/test period is over.

[cconsta1]

Hi guys,

I just replaced the old server with the new and everything runs smoothly :)

Thanks again!!

Best regards, Valentino

[cconsta1]

Hi guys,

The new version of my viewer which uses the https server is now online. If you want you can check it out here: https://clowder.ncsa.illinois.edu/clowder/

Just create an account and upload a PLY or NEXUS file to see what will happen.

Thanks again for all your help with this!

[potenziani]

Hi Consta,

I created an account a few days ago, but the system still says my account is not active... so, no chance to try so far!

Ciao,

Marco Potenziani

Researcher Visual Computing Laboratory Institute of Information Science and Technologies (ISTI) National Research Council (CNR) Via G. Moruzzi 1, 56124 Pisa ITALY phone: +39 050 621 8212 email: marco.potenziani@isti.cnr.it web: http://vcg.isti.cnr.it/~potenziani

Adjunct Professor Department of Digital Humanities University of Pisa (UNIPI)

Associate Editor ACM Journal on Computing and Cultural Heritage (JOCCH)

Il giorno mer 3 feb 2021 alle ore 09:00 Chrysovalantis Constantinou < notifications@github.com> ha scritto:

Hi guys,

The new version of my viewer which uses the https server is now online. If you want you can check it out here: https://clowder.ncsa.illinois.edu/clowder/

Just create an account and upload a PLY or NEXUS file to see what will happen.

Thanks again for all your help with this!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cnr-isti-vclab/3DHOP/issues/36#issuecomment-772313573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWYEZ7WN5HEXRT7R5PCGADS5D7AJANCNFSM4LXLKMFA .