【亲测免费】 Thingiview.js 开源项目使用教程

Thingiview.js 开源项目使用教程

1. 项目的目录结构及介绍

tbuser/thingiview.js/
├── examples/
│   ├── ...
│   └── ...
├── javascripts/
│   ├── Three.js
│   ├── plane.js
│   └── thingiview.js
├── php/
│   ├── ...
│   └── ...
├── .gitignore
├── LICENSE
└── README.md

• examples/: 包含项目的示例文件，展示了如何使用Thingiview.js来加载和显示3D模型。
• javascripts/: 包含项目的主要JavaScript文件，包括Three.js、plane.js和thingiview.js。
• php/: 包含与项目相关的PHP文件，可能用于服务器端的某些功能。
• .gitignore: 指定Git版本控制系统应忽略的文件和目录。
• LICENSE: 项目的许可证文件，本项目使用LGPL-3.0许可证。
• README.md: 项目的介绍文件，包含项目的概述、使用方法和示例代码。

2. 项目的启动文件介绍

Thingiview.js项目的启动文件主要是javascripts/thingiview.js。这个文件是项目的主要入口，负责初始化3D模型查看器并加载3D模型。以下是启动文件的关键部分：

window.onload = function() {
    thingiurlbase = "/javascripts";
    thingiview = new Thingiview("viewer");
    thingiview.setObjectColor('#C0D8F0');
    thingiview.initScene();
    thingiview.loadSTL("/objects/cube.stl");
};

• window.onload: 当页面加载完成后执行的函数。
• thingiurlbase: 设置JavaScript文件的基路径。
• thingiview: 创建Thingiview实例，并传入容器div的ID。
• setObjectColor: 设置3D模型的颜色。
• initScene: 初始化3D场景。
• loadSTL: 加载STL格式的3D模型文件。

3. 项目的配置文件介绍

Thingiview.js项目没有明确的配置文件，但可以通过修改javascripts/thingiview.js中的参数来配置查看器的行为。以下是一些常用的配置选项：

thingiview.setShowPlane(true); // 显示或隐藏网格平面
thingiview.setBackgroundColor('#ffffff'); // 设置背景颜色
thingiview.setObjectMaterial('solid'); // 设置对象材质（实心或线框）
thingiview.setRotation(true); // 设置对象是否自动旋转
thingiview.setCameraView('top'); // 设置相机视角
thingiview.setCameraZoom(5); // 设置相机缩放
thingiview.displayAlert("This is a message"); // 显示消息框

通过这些配置选项，可以自定义Thingiview.js查看器的行为和外观，以满足不同的需求。