我正在使用 STL Viewer Javascript 插件在我的网站中显示 3D 图像。 STL 图像的大小约为 50MB。因此，加载需要很长时间。那么在STL图像加载之前添加加载器图像是否可行。
我正在使用这个插件，https://www.viewstl.com/plugin/
请检查我下面的代码，
<body style="margin:0px;">
<div id="stl_cont" style="width:600px;height:600px;margin:0; background:#ebebeb; overflow: hidden;"></div>
<script src="stl_viewer.min.js"></script>
<script>
var stl_viewer=new StlViewer
(
document.getElementById("stl_cont"),
{
models:
[
{filename:"/test/Sienna.stl"}
]
}
);
</script>
</body>
最佳答案
我尝试了我在下面粘贴的代码，它在我的本地机器上运行良好，请检查并让我知道它是否也适用于你。
P.S 请用适当的 gif url 替换图像元素的源以使其正常工作
<body style="margin: 0px">
<div
id="stl_cont"
style="
width: 600px;
height: 600px;
margin: 0;
background: #ebebeb;
overflow: hidden;
"
>
<div
class="loading"
style="
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img src="./assets/images/icons8-dots-loading.gif" alt="" />
</div>
</div>
<script src="stl_viewer.min.js"></script>
<script>
var stl_viewer = new StlViewer(document.getElementById("stl_cont"),
{
models: [
{ filename: "/test/Sienna.stl" }
],
all_loaded_callback: function () {
document.querySelector(".loading").remove();
},
}
);
</script>
</body>关于javascript - 添加 Loader 直到 STL 图像加载 PHP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69356118/