使用Stl Viewer插件加载STL文件时如何添加加载指示器？

可以实现，你可以通过插件自带的加载完成回调配合预放置的加载占位元素完成需求，具体修改方案如下：

修改后完整代码 #

<body style="margin:0px;">
    <div id="stl_cont" style="width:600px;height:600px;margin:0; background:#ebebeb; overflow: hidden;position: relative;">
        <!-- 预放置加载占位元素，默认显示 -->
        <div id="stl_loading" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: #ebebeb;z-index: 10;">
            <!-- 此处可替换为你自定义的加载GIF、静态图或提示文字 -->
            <span>3D模型加载中，请稍候...</span>
        </div>
    </div>

    <script src="stl_viewer.min.js"></script>       
    <script>
        var stl_viewer=new StlViewer
        (
            document.getElementById("stl_cont"),
            {
                models:
                [
                    {filename:"/test/Sienna.stl"}
                ],
                // 新增模型加载完成回调配置
                on_complete: function() {
                    // STL文件加载、解析、渲染完成后隐藏加载占位元素
                    document.getElementById('stl_loading').style.display = 'none';
                }
            }
        );
    </script>
    
</body>

补充说明 #

• 你可以任意调整stl_loading元素的样式，替换成符合网站设计风格的加载动效即可
• on_complete回调触发时机为所有配置的STL文件完全加载解析且渲染到画布后，刚好匹配隐藏加载占位符的逻辑

内容的提问来源于stack exchange，提问作者Sunny Rahevar