Substance Logo

3DCS Web Viewer

Designing for the 3DCS Viewer
UI Components

Create your first scene

A minimal 3d scene

Now that you have downloaded the package project, you can create your first scene.

A scene is a collection of nodes (web-components) organized in a tree structure. Some node can have other nodes as children.

A base 3d scene could look like this :

<!-- <script
  type="module"
  async
  src="https://cdn.substance3d.com/v2/files/public/3dcs-viewer-develop-ff78b94dec0109c8c5af3dd1aca384003f53de70.js"
></script> -->
<!-- The containing viewer, you can ref this to style it like the width/height -->
<a3d-viewer>
  <!-- The scene that will contain your 3d scene -->
  <a3d-scene>
    <!-- A environment map, you can reuse the one provided -->
    <a3d-environment
      src="https://cdn.substance3d.com/v2/files/public/studio.hdr"
    ></a3d-environment>
    <!-- A node to contain your 3d mesh -->
    <a3d-node>
      <!-- The 3d mesh to display, replace src with your url -->
      <a3d-mesh
        src="https://public-dev.cw.substance3d.io/asset/default/df477acc-8755-4608-8d0d-f443bd434fa2/model_web_viewer/WaterBottle.glb"
      ></a3d-mesh>
    </a3d-node>
  </a3d-scene>
</a3d-viewer>

this line of code will give you a default 3d scene with a 3d model.