PHPackages discoverygarden/dgi\_3d\_viewer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. discoverygarden/dgi\_3d\_viewer ActiveDrupal-module[Utility & Helpers](/categories/utility) discoverygarden/dgi\_3d\_viewer =============================== Provide a viewer for 3D objects in Drupal. v1.4.5(6mo ago)19GPL-3.0-onlyJavaScript Since May 17Pushed 6mo ago6 watchersCompare [ Source](https://github.com/discoverygarden/dgi_3d_viewer)[ Packagist](https://packagist.org/packages/discoverygarden/dgi_3d_viewer)[ RSS](/packages/discoverygarden-dgi-3d-viewer/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (2)Versions (14)Used By (0) DGI 3D Viewer ============= [](#dgi-3d-viewer) Introduction ------------ [](#introduction) This module provides display plugins for 3D model files in Drupal. Currently, the following formats are supported: - GLTF/GLB - GLB is preferred, since some browsers fail to handle large GLTFs. - OBJ Three.js Library Usage Notes ---------------------------- [](#threejs-library-usage-notes) Given that Drupal does not yet fully support ES6 modules, specifically importmaps, and we want to use the latest version of three.js, we have a slightly unusual setup for using the three.js library that results in compiling our usage of three.js into a single file that can be loaded. Such a setup results in the actual three.js library only needing to be present to compile when developing, and not needing to be present in production. However, if this process becomes unnecessary in the future, then we can simply use the three.js library directly, without compiling. Requirements (for development) ------------------------------ [](#requirements-for-development) This module requires the following modules/libraries: - [Three.js 0.151.0](https://github.com/mrdoob/three.js/releases/tag/r151) - And the following 'Add-ons': - [GLTFLoader](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/loaders/GLTFLoader.js) - [OBJLoader](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/loaders/OBJLoader.js) - [MTLLoader](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/loaders/MTLLoader.js) - [OrbitControls](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/controls/OrbitControls.js) - [RoomEnvironment](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/environments/RoomEnvironment.js) - [strFromU8, unzipSync](https://github.com/mrdoob/three.js/blob/r151/examples/jsm/libs/fflate.module.js) - [Node.js](https://nodejs.org/en/) - [NPM](https://www.npmjs.com/) - [Webpack](https://webpack.js.org/) - [Babel](https://babeljs.io/) Installation ------------ [](#installation) Install the module as usual, see [this](https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules) for further information. Configuration ------------- [](#configuration) To use the 3D viewer, you need to configure the display plugin(s) for the file field you want to use. The `3D Model File` widget provided by this module adds the ability to preview the uploaded file provided the file is a supported format. The `3D Model File` formatter provided by this module can be used independently of the widget if you do not want file preview added to the ingest form. The preview provided by the widget could be useful for users to verify that they have uploaded the correct file, and to verify that the file is supported by the 3D viewer. However, the preview loading time can be slow, depending on the model being previewed, and so it may be best to use the regular file widget in some cases. ### Bonus configuration: Camera, Lights, Textures [](#bonus-configuration-camera-lights-textures) The following is a work in progress to be replaced by a MediaSource Plugin Sometimes we want to accommodate viewing a 3D model that does not include anything aside from the object itself in the uploaded file, so we need a way to configure a camera and some light; without light and something to perceive the light bouncing off the model, only darkness is rendered. Additionally, sometimes we would rather not generate a GLB, and just upload the OBJ and related MTL and texture files. These capabilities are available, but rely on the existence of certain configuration entities. Configuration expectations: - media.type.3d\_object - field\_media\_file: the field that uses the 3D File Formatter - field\_customcamera: programmatically flattened values from field\_camera - field\_camera: Entity reference link to paragraphs.paragraphs\_type.perspective\_camera\_settings - field\_materials\_zip - field\_room\_environment - field\_background\_color - field\_add\_default\_lights Usage ----- [](#usage) Once the module is installed and configured, file fields using the `3D Model File` formatter to display a file field will render the 3D model in the browser, provided the file is a supported format. Resources --------- [](#resources) For more information on the three.js library, and 3D model formats, see the following resources: - [Three.js](https://threejs.org/) - [GLTF](https://www.khronos.org/gltf/) Development ----------- [](#development) This module uses Webpack to compile the three.js library and our usage of it into a single file. ### Three.js Library Installation [](#threejs-library-installation) Desired outcome: The appropriate version of three.js exists in `/opt/www/drupal/libraries/three`; if the location needs to change, then adjust the webpack.config.js file accordingly. #### A Composer way to install three.js: [](#a-composer-way-to-install-threejs) 1. Add npm-asset handling to your drupal-project composer.json. - See [this](https://www.drupal.org/docs/develop/using-composer/manage-dependencies#third-party-libraries) for more information. - Make sure to add the following to the `extra` section of your composer.json: ``` "installer-paths": { "libraries/{$name}": ["type:npm-asset"] } ``` 2. Run `composer require npm-asset/three:^0.151.0` in the drupal-project root directory. #### A manual way to install three.js: [](#a-manual-way-to-install-threejs) 1. In `/opt/www/drupal/libraries`, run `git clone --branch= --depth=1 https://github.com/mrdoob/three.js.git`It's a rather large repo, so the `--depth=1` option is recommended to avoid downloading the entire history. ### Three.js Library Compilation [](#threejs-library-compilation) 1. In the module root directory, run `npm install` to install the required packages. 2. Make sure the three.js library is installed in the correct location expected by webpack.config.js. 3. Make desired changes to the `js/*.es6.js` file(s), and run `webpack` to compile it to `js/*.js`. For an example of compilation, and a way to check if issues are with your code changes or the rest of the setup, see `js/test_threejs.es6.js`, `webpack_test_threejs.config.js`, and the `build-test` script in `package.json`. Try deleting `js/test_threejs.js` and recompiling it with `npm run build-test`. Sponsors -------- [](#sponsors) - [UNR](https://library.unr.edu/) Maintainers ----------- [](#maintainers) Current maintainers: - [discoverygarden](https://discoverygarden.ca/) License ------- [](#license) [GPLv3](http://www.gnu.org/licenses/gpl-3.0.txt) ### Health Score 37 — LowBetter than 83% of packages Maintenance68 Regular maintenance activity Popularity6 Limited adoption so far Community17 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~81 days Recently: every ~195 days Total 12 Last Release 188d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ed79bbc35ed0aaee2f603c6f16885fb01e203941eea0cd63013f9f6185df6c30?d=identicon)[adam-vessey](/maintainers/adam-vessey) ![](https://www.gravatar.com/avatar/49d799e416ff30e90b07d1b7b6a487dfe945ae884c53747de4724439965d7904?d=identicon)[lutaylor](/maintainers/lutaylor) ![](https://www.gravatar.com/avatar/454136e389341c2a9c22dfba3107e09e2f8653807185bb213c5272efa9b93864?d=identicon)[willtp87](/maintainers/willtp87) --- Top Contributors [![JojoVes](https://avatars.githubusercontent.com/u/19390668?v=4)](https://github.com/JojoVes "JojoVes (26 commits)")[![nchiasson-dgi](https://avatars.githubusercontent.com/u/53783039?v=4)](https://github.com/nchiasson-dgi "nchiasson-dgi (14 commits)")[![chrismacdonaldw](https://avatars.githubusercontent.com/u/31731869?v=4)](https://github.com/chrismacdonaldw "chrismacdonaldw (7 commits)")[![adam-vessey](https://avatars.githubusercontent.com/u/607975?v=4)](https://github.com/adam-vessey "adam-vessey (6 commits)")[![willtp87](https://avatars.githubusercontent.com/u/688918?v=4)](https://github.com/willtp87 "willtp87 (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags 3d-modelsdrupaldrupal-moduleislandoraviewer ### Embed Badge ![Health badge](/badges/discoverygarden-dgi-3d-viewer/health.svg) ``` [![Health](https://phpackages.com/badges/discoverygarden-dgi-3d-viewer/health.svg)](https://phpackages.com/packages/discoverygarden-dgi-3d-viewer) ``` ### Alternatives [droptica/droopler Droopler - SEO Friendly CMS & Site Builder - is a Drupal-based website builder that helps you create beautiful, fast, and easy-to-manage websites 6543.1k1](/packages/droptica-droopler) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)