Short & Quick: Rendered STL-Model Viewer inside Topics - in under 2 minutes


  • Re: Execute Custom JS on Infinite Scroll

    A little while ago I read this thread - today that strange white gave me an idea. How cool would it be to have an STL viewer right in the forum?

    So I got down to work and programmed a small snippet quick & dirty. Everything can be reached via custom codes in the ACP. No plugin required.

    Preview & Demo



    How does it work?

    Your liked files will be automatically converted:

    [My Model](https://example.com/assets/model.stl)
    

    turns out with a little 3d cube attached. A click on this cube toggles the STL-Model preview.

    Bildschirmfoto 2021-03-06 um 14.22.23.png

    As showed in the preview video, the STL-Viewer is also available in the composer preview.

    Bildschirmfoto 2021-03-06 um 14.24.18.png

    Compatibility

    This little snippet is also mobile responsive 😵 You can view the 3d models on mobile devices like a boss. Full responsive. 💪


    Code

    Just at these snippets to custom HTML / CSS / Javascript via the ACP.

    style.css

    iframe.stl-model-viewer{
        min-width: 200px;
        max-width: 600px;
        width: 100%;
    
        min-height: 300px;
        max-height: 500px;
        height: 100%;
    
        border: 1px solid lightgray;
        border-radius: 10px;
    
        display: block;
    
        margin-bottom: 25px;
        margin-left: auto;
        margin-right: auto;
    
    
        -webkit-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);
        box-shadow: 0px 13px 29px -15px rgba(0,0,0,0.75);
    
    
    }
    

    javascript.js

    var re = /(?:\.([^.]+))?$/;
    // NO BACKSLASH AT THE END!
    var base_url = "https://your-nodebb-url.com";
    
    $(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function(data) {
        
        $('a').each(function(){
          var href = $(this).attr("href");
          var ext = re.exec(href)[1];
          
          if(ext == "stl"){
            var indicator = Math.floor(Math.random() * 1000000) + 1 
            var currentModelUrl = $(this);
            if (href.substring(0, 8) !== 'https://'){
                href = base_url + href;      
            }
            
            
            var alreadyLinked = $(this).closest('p').find('a#open-stl-model').attr('data-url');
            
            if(!alreadyLinked){
                $(' <a style="margin-left: 5px; cursor: pointer;" title="3D-Modell anzeigen" id="open-stl-model" data-url="' + href + '" related="' + indicator + '"><i class="fa fa-cube"></i></a>').insertAfter(currentModelUrl);
                $(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") );
            }
    
            
            
          }
        });
        
        
        
    });
    
    $(window).on('action:ajaxify.end action:composer.preview', function(data) {
        
        $('a#open-stl-model').click(function(){
            var thisLink = $(this);
            var related = thisLink.attr("related");
            $('div#' + related).slideToggle();
        })
        
    })
    
    

    Before running:

    Change the base url to fit your nodebb path:

    // NO BACKSLASH AT THE END!
    var base_url = "https://your-nodebb-url.com";
    

    In case of https://community.nodebb.org/ it would be:

    // NO BACKSLASH AT THE END!
    var base_url = "https://community.nodebb.org";
    

    It is used to convert local links e.g /assets/uploads/top_pla_3_holes.stl to public links: https://community.nodebb.org/assets/uploads/top_pla_3_holes.stl


    Adjustments

    You can take a look at viewstl.com/embed to adjust your model viewer inside of javascript.js.

    $(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="https://www.viewstl.com/?embedded&url=' + href + '&color=white&bgcolor=transparent&shading=flat&rotation=yes&clean=yes&noborder=yes&orientation=top&edges=no"></iframe></div>').insertAfter( $(this).closest("p") );
    

    There are thinks like:

    • Shading
    • Rotation
    • Orientation
    • Model Color
    • Background Color

    Limitations

    The files which are linked in the topic have to be accessible by viewstl.com so private files wont work here I think. 🤔
    Maybe you do have to enable cross site origin for viewstl.com as well.


    This should be just a little playaround with some nodebb given features. As mentioned: it's a quick & dirty plugin which uses third party services. But there is also a standalone javascript plugin available: https://www.viewstl.com/plugin/ which you could use in a nodebb plugin.

    See this topic more as a simple feature and as well as an inspiration for other plugins in this direction you could make.

    Maybe its interesting for @Aleksei or someone else. 🙂

    Thanks for reading. 👋


  • @dogs ha, nice one! And how did you know that I may be interested? 🙂
    Thanks, indeed I may use it in future on our forum.


  • @aleksei I read your topic: https://community.nodebb.org/topic/15252/execute-custom-js-on-infinite-scroll and saw you're dealing with C4D-Files. 😄

Suggested Topics

| |