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

    How does it work?

    Your liked files will be automatically converted:

    [My Model](

    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


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


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


        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);


    var re = /(?:\.([^.]+))?$/;
    var base_url = "";
    $(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function(data) {
          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');
                $(' <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="' + 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) {
            var thisLink = $(this);
            var related = thisLink.attr("related");
            $('div#' + related).slideToggle();

    Before running:

    Change the base url to fit your nodebb path:

    var base_url = "";

    In case of it would be:

    var base_url = "";

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


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

    $(' <div id="' + indicator + '" style="display: none;" data-url="' + href + '"><iframe class="stl-model-viewer" src="' + 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


    The files which are linked in the topic have to be accessible by so private files wont work here I think. 🤔
    Maybe you do have to enable cross site origin for 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: 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: and saw you're dealing with C4D-Files. 😄

Suggested Topics

  • 11 Votes
    22 Posts

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

  • 0 Votes
    2 Posts

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

  • 1 Votes
    3 Posts

    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

    You can open a new issue for discussion and feedback.

  • 0 Votes
    11 Posts

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

    mongos --configdb --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: 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)