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

Moved Tutorials
  • 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


    https://nodebb.development.fail/topic/2/3d-rendered-stl-viewer-inside-topics


    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


  • 11 Votes
    22 Posts
    2k Views

    @baris After upgrading to nodebb-plugin-composer-default 10.1.8 works 👏

  • 0 Votes
    2 Posts
    142 Views

    @julian nice idea, and one I can certainly make use of.

  • 1 Votes
    3 Posts
    886 Views

    Hope so! Seems like there's at least one other site using this port of phpbb. Perhaps more if they cleaned out the attribution footer markup or aren't indexed by google.

  • 0 Votes
    12 Posts
    4k Views

    You can open a new issue for discussion and feedback.

  • 0 Votes
    11 Posts
    6k Views

    I have upgraded to mongodb 2.6.4, I have run the following command to upgrade the mongodb to v5

    mongos --configdb 127.0.0.1:27017 --upgrade

    with no error, I have clicked on reindex the database. when I search I get the following stuff in the cli

    MongoError: Unable to execute query: error processing query: ns=0.search limit=50 skip=0 Tree: $and key == "topic" TEXT : query=cool, language=, tag=NULL Sort: {} Proj: {} planner returned error: need exactly one text index for $text query at Object.toError (/nodebb/node_modules/mongodb/lib/mongodb/utils.js:114:11) at /nodebb/node_modules/mongodb/lib/mongodb/cursor.js:700:54 at Cursor.close (/nodebb/node_modules/mongodb/lib/mongodb/cursor.js:983:5) at commandHandler (/nodebb/node_modules/mongodb/lib/mongodb/cursor.js:700:21) at /nodebb/node_modules/mongodb/lib/mongodb/db.js:1847:9 at Server.Base._callHandler (/nodebb/node_modules/mongodb/lib/mongodb/connection/base.js:445:41) at /nodebb/node_modules/mongodb/lib/mongodb/connection/server.js:478:18 at MongoReply.parseBody (/nodebb/node_modules/mongodb/lib/mongodb/responses/mongo_reply.js:68:5) at null.<anonymous> (/nodebb/node_modules/mongodb/lib/mongodb/connection/server.js:436:20) at EventEmitter.emit (events.js:95:17)