`a3d-grid`

The a3d-grid extension can be used to add a grid to your a3d-viewer component.

This extension is hosted on GitHub (GHEC) at Adobe-3dcs/a3d-viewer-extensions . The extension is available at A3d Grid

Example

You can find a more complete example on Github (GHEC) : https://github.com/Adobe-3dcs/a3d-viewer-extensions/blob/main/a3d-grid/test/app/index.html

How to implement

Using npm :


npm install @a3d-viewer/viewer
npm install @a3d-extensions/a3d-grid

Importing :


import '@a3d-viewer/viewer'
import '@a3d-extensions/a3d-grid'

Updating the a3d-grid:


<a3d-viewer clear-color="#0f0f0f" source="https://myModel.glb">
  <a3d-grid></a3d-grid>
</a3d-viewer>
 
<script>
  const viewer = document.querySelector('a3d-viewer')
  const grid = document.querySelector('a3d-grid')
 
  const handleSceneReadyEvent = () => {
    grid.setAttribute('line-color', '#ff0000')
  }
 
  viewer.addEventListener('sceneready', handleSceneReadyEvent)
</script>

Documentation

For detailed documentation on a3d-grid extension, please refer to the README in the GitHub repository.