Description

Viewer 3D provides a specialized field type for Drupal that allows content editors to easily upload and manage 3D model files (GLB format) and render them using Babylon.js. The module creates an interactive 3D viewer directly in your content, giving your users an engaging way to interact with 3D models.

Future development plans include layer-based customization of models, allowing content editors to define customizable elements (like different parts of a 3D model) and set available options for colors and materials on a per-content type basis.

Requirements

Drupal 10.x or 11.x
PHP 8.3 or higher
Composer
Access to asset-packagist.org (for Babylon.js libraries)

Installation

1. Add Asset Packagist to your project

This module requires npm packages from Babylon.js which are distributed through asset-packagist.org. When the module is installed, it will automatically try to install these Babylon.js dependencies via Composer, which is why your project's root composer.json must be configured properly first.

Follow these steps to configure your project's composer.json:

Step 1: Add the required composer package

Add the Composer Installers Extender plugin to your project:

composer require oomphinc/composer-installers-extender:^2.0

Step 2: Add the asset-packagist repository

Run the following Composer command to add the asset-packagist repository:

composer config repositories.asset-packagist composer https://asset-packagist.org

Step 3: Configure installer paths

Run this Composer command to configure installer paths for asset types. Note that you'll need to adjust the path according to your specific Drupal project structure (replace `web` with `docroot` or other document root folder name if needed):

# Replace 'web' with your document root folder name (e.g., 'docroot') as needed
# First, check your current installer paths configuration
composer config extra.installer-paths --json

# If you already have a web/libraries/{$name} path config and want to add asset types
composer config --json --merge extra.installer-paths."web/libraries/{\$name}" '["type:bower-asset", "type:npm-asset"]'

# If you don't have a web/libraries path yet, use this command instead:
composer config --json extra.installer-paths."web/libraries/{\$name}" '["type:drupal-library", "type:bower-asset", "type:npm-asset"]'

Note: If your Drupal installation doesn't use a subdirectory for the web root (i.e., core is in the project root), you should use `libraries/${name}` instead (without the `web/` prefix).

Step 4: Add installer types

Run this Composer command to add the installer-types configuration:

# Check if you already have installer-types configuration
composer config extra.installer-types --json

# If you already have installer-types set, use --merge to add new types
composer config --json --merge extra.installer-types '["bower-asset", "npm-asset"]'

# If you don't have installer-types set yet, use this command
composer config --json extra.installer-types '["bower-asset", "npm-asset"]'

Step 5: Update composer
After making these changes, update your project dependencies:

composer update

2. Install the module

After configuring asset-packagist, install the module using Composer:

composer require drupal/viewer_3d

This will automatically download the module along with its Babylon.js dependencies from asset-packagist.

3. Enable the module

Enable the module through the Drupal admin interface or using Drush:

drush en viewer_3d

Viewer 3D