Viewstl：JavaScript 3D模型查看器技术文档-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01241/article/details/143039340

Viewstl：JavaScript 3D模型查看器技术文档

viewstl Viewstl Javascript plugin - STL/OBJ 3D files Viewer by viewstl.com 项目地址: https://gitcode.com/gh_mirrors/vi/viewstl

概述

Viewstl是一个基于JavaScript的3D模型查看器，支持读取二进制和ASCII格式的STL文件以及OBJ文件。本项目利用THREE.js库，在无需直接处理THREE.js细节的情况下，轻松实现3D文件的浏览。对于特定格式如3MF或VSB的文件，它依赖于JSZip库来处理压缩文件。

安装指南

获取Viewstl插件

直接下载: 访问Viewstl插件页面，点击下载最新版本的stl_viewer.min.js, parser.min.js, load_stl.min.js, 及其他依赖（如WebGL Detector等）到您的项目目录。
手动上传至服务器: 将下载的文件上传到您网站的适当位置。

引入依赖

在HTML文件的 <head> 或 <body> 部分引入必要的JavaScript文件：

<script src="path/to/stl_viewer.min.js"></script>
<!-- 其他相关库也应在此处引入，例如THREE.js和JSZip（如果需要）。 -->

使用说明

基础使用

创建一个容器元素用于放置3D查看器，并初始化StlViewer实例。以下示例展示了加载名为'mystl.stl'文件的基本步骤：

<div id="stl_cont"></div>

<script>
    var stl_viewer = new StlViewer(document.getElementById("stl_cont"), {
        models: [{id: 0, filename: "mystl.stl"}]
    });
</script>

依赖JSZip的情况

当处理3MF或VSB格式时，需额外引入JSZip库，并在实例化StlViewer时指定路径：

var stl_viewer = new StlViewer(
    document.getElementById("stl_cont"),
    {
        models: [...],
        jszip_path: "/path/to/jszip.min.js",
        jszip_utils_path: "/path/to/jszip-utils.min.js"
    }
);

确保将这些路径替换为实际存放JSZip库的位置。