什么是 viewer.js?
viewer.js 是一个基于 Three.js 的开源 JavaScript 库，用于在网页中展示 3D 模型。它提供了丰富的功能，如多种摄像机视角、灯光、阴影效果、纹理贴图等，可以让用户通过鼠标交互浏览和操作 3D 模型，同时支持自定义样式和事件处理。
安装 viewer.js
使用 npm 可以很方便地安装 viewer.js：
npm install viewerjs
使用 viewer.js
加载 3D 模型
首先，需要在 HTML 页面中添加一个 DOM 元素作为容器，并引入 viewer.js 和 Three.js 的库文件：
<div id="container"></div> <script src="https://cdn.jsdelivr.net/npm/viewerjs@2.16.1/dist/viewer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
然后，在 JavaScript 中创建一个 Viewer 对象，并指定要加载的 3D 模型文件路径（支持多种格式，如 .obj, .glb, .gltf 等）：
var viewer = new Viewer(document.getElementById('container'), {
url: 'path/to/model.obj'
});此时，viewer.js 会自动异步加载模型文件，并在加载完成后显示在容器中。
设置视角和交互模式
viewer.js 支持多种预设的视角和交互模式，可以通过配置选项进行设置。例如，以下代码将切换到透视投影（Perspective）和轨道控制器（OrbitControls）：
-- -------------------- ---- -------
--- ------ - --- -------------------------------------------- -
---- --------------------
------- -
----- -------------
--
--------- -
----- -------
-
---添加灯光和纹理贴图
viewer.js 还支持添加灯光和纹理贴图，以增强渲染效果。例如，以下代码添加了一个平行光源和一张地球贴图：
-- -------------------- ---- -------
--- ------ - --- -------------------------------------------- -
---- --------------------
------- --
----- --------------
------ ---------
---------- --
--------- --- -- --
---
--------- --
---- --------------------
------- --- ---
----- ---------------------- ---------------------
--
---自定义样式和事件处理
viewer.js 提供了多个回调函数，可以用于自定义样式和事件处理。例如，以下代码定义了一个回调函数，在加载完成后设置背景颜色为黑色：
var viewer = new Viewer(document.getElementById('container'), {
url: 'path/to/model.obj',
onReady: function() {
viewer.renderer.setClearColor(0x000000);
}
});还可以通过监听事件来实现更复杂的交互行为。例如，以下代码定义了一个回调函数，在用户单击模型时弹出提示框：
var viewer = new Viewer(document.getElementById('container'), {
url: 'path/to/model.obj',
onClick: function(event) {
alert('Clicked on ' + event.object.name);
}
});示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----------
-------
---------- -
------ -----
------- ------
-
--------
-------
------
---- ---------------------
------- -----------------------------------------------------------------------------
------- --------------------------------------------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------