README

简介

本模块为 Drupal 提供了 3D 模型文件的显示插件。目前支持以下格式：

GLTF/GLB - 由于某些浏览器无法处理大型 GLTF，因此优先选择 GLB。
OBJ

Three.js 库使用说明

由于 Drupal 尚未完全支持 ES6 模块，特别是 importmaps，而我们希望使用最新的 three.js 版本，因此我们使用了一种稍微不寻常的方式来使用 three.js 库，结果是将我们使用的 three.js 编译成一个可加载的单个文件。这种设置导致实际的 three.js 库在开发时只需要用于编译，而不需要在生产环境中存在。然而，如果这个流程在将来变得不再必要，那么我们可以简单地直接使用 three.js 库，而不需要编译。

要求（开发）

本模块需要以下模块/库：

安装

按照常规方式安装模块，更多信息请参阅此链接。

配置

要使用 3D 查看器，您需要配置要使用的文件字段的显示插件。本模块提供的 3D 模型文件 小部件可以预览上传的文件（如果文件是支持的格式）。如果不想将文件预览添加到摄取表单中，可以独立使用本模块提供的 3D 模型文件 格式化程序。小部件提供的预览对于用户来说可能很有用，以验证他们是否已上传正确的文件，并验证文件是否受 3D 查看器支持。然而，预览加载时间可能会很慢，具体取决于要预览的模型，因此在某些情况下最好使用常规的文件小部件。

额外配置：相机、灯光、纹理

以下是一个正在进行的任务，将被媒体源插件取代

有时我们想要展示一个不包含任何其他内容的 3D 模型（仅包含对象本身）的视图，因此我们需要一种配置相机和一些灯光的方法；没有灯光和可以感知光线从模型上反弹的东西，只会渲染出黑暗。另外，有时我们可能更愿意不生成 GLB，只上传 OBJ 以及相关的 MTL 和纹理文件。这些功能是可用的，但依赖于某些配置实体的存在。

配置预期

media.type.3d_object
- field_media_file: 使用 3D 文件格式化程序的字段
- field_customcamera: 从 field_camera 中编程扁平化的值
- field_camera: 实体引用链接到 paragraphs.paragraphs_type.perspective_camera_settings
- field_materials_zip
- field_room_environment
- field_background_color
- field_add_default_lights

使用方法

安装并配置模块后，使用 3D 模型文件 格式化程序的文件字段将渲染浏览器中的 3D 模型，前提是该文件是支持的格式。

资源

有关three.js库和3D模型格式的更多信息，请参阅以下资源

开发

本模块使用Webpack将three.js库和我们的使用编译成单个文件。

Three.js库安装

预期结果：three.js的正确版本已存在于/opt/www/drupal/libraries/three；如果位置需要更改，则相应地调整webpack.config.js文件。

安装three.js的Composer方式

将npm-asset处理添加到您的drupal-project composer.json中。

有关更多信息，请参阅此处。
请确保将以下内容添加到您的composer.json文件的extra部分
```
"installer-paths": {
  "libraries/{$name}": ["type:npm-asset"]
}
```

在drupal-project根目录中运行composer require npm-asset/three:^0.151.0。

手动安装three.js的方式

在/opt/www/drupal/libraries中，运行git clone --branch=<版本标签> --depth=1 https://github.com/mrdoob/three.js.git。由于这是一个相当大的仓库，因此建议使用--depth=1选项以避免下载整个历史记录。

Three.js库编译

在模块根目录中，运行npm install以安装所需的包。
确保three.js库已安装在与webpack.config.js中预期位置。
对js/*.es6.js文件（s）进行所需更改，然后运行webpack将其编译为js/*.js。

有关编译示例以及检查问题是否与您的代码更改或其他设置有关的方法，请参阅js/test_threejs.es6.js、webpack_test_threejs.config.js以及package.json中的build-test脚本。尝试删除js/test_threejs.js并使用npm run build-test重新编译它。

赞助商

维护者

当前维护者

discoverygarden

许可证

GPLv3

discoverygarden / dgi_3d_viewer

维护者

详细信息