API Reference

The content of this page is also included in the ZIP file as API_REFERENCE.md.

API reference

`uuid`

Type: Attribute

Accepted values: Strings, e.g. 'b7a62e90-66f6-4aa8-b66c-4f90739f01a1'

Description: Loads the 3D file associated with the specified UUID into the
3D Viewer. The 3D file must have been uploaded to the 3YOURMIND server first,
e.g. using axios and Vue:

<template>
  <input type="file" @change="onUploadFile"/>
  <threeyourmind-viewer-sdk :uuid="uuid"/>
</template>

...

data() {
  return ({
    uuid: null,
  })
},
...
methods: {
  onUploadFile(event) {
    const file = event.target.files[0]
    const formData = new FormData()
    formData.append('file', file)
    axios
      .post('/api/v2.0/files/', formData, {
        headers: {
          'content-type': 'multipart/form-data',
        },
      })
      .then((response) => {
        this.uuid = response.data.uuid
      })
  }
}

`uuidLoaded`

Type: Event

Value: event.detail[0] is an object containing the properties
isSuccessful, uuid and message. The message can be null.

Description: Triggers when a file was loaded into the 3D Viewer, e.g.
through a change of the uuid. The message property contains an error
description if isSuccessful is false.

`url`

Type: Attribute

Accepted values: Strings, e.g. '<http://app.3yourmind.com'>

Description: Specifies the URL requests are sent to. This should be used to
append an Authorization header to each request.

`parameter`

Type: Attribute

Accepted values: Objects of the form:

{
  material: {
    minimumWallThickness: 0.2,
    optimalWallThickness: 0.5,
  },
  printer: {
    buildChamberBoundingBox: {
      width: 10.0,
      depth: 10.0,
      height: 10.0,
    }
  }
}

For Vue: Set the object using :parameter="JSON.stringify(parameter),
where parameter is an object of the form described above.

Description: Sets printability parameter. Information about materials can be
obtained from the 3YOURMIND server. See the
API documentation
for more information. Example using axios
and Vue:

<template>
  <threeyourmind-viewer-sdk :parameter="JSON.stringify(parameter)"/>
</template>

...

data() {
  return ({
    parameter: null,
  })
},
...
methods: {
  materialSelected() {
    axios
      .get('<https://app.3yourmind.com/api/v2.0/user-panel/baskets/{basket_id}/lines/{line_id}/materials/')>
      .then((response) => {
        const material = response.data[0]
        this.parameter = {
          material: {
            minimumWallThickness: material.minimumWallThickness,
            optimalWallThickness: material.optimalWallThickness,
          }
        }
      })
  }
}

`unit`

Type: Attribute

Accepted values: 'mm', 'inch' and 'cm'

Description: Sets the unit of measurement. Note: This is a
two-way binding. The associated event is
unitChanged.

`unitChanged`

Type: Event

Value: event.detail[0] is a string which can be one of the accepted values
of unit

Description: Triggers when the user selects a different unit in the
parameter panel.

`modelParameterChanged`

Type: Event

Value: event.detail[0] is an object of the form:

{
  "width": 33.26300048828125,
  "height": 56.83000183105469,
  "depth": 40.264007568359375,
  "volume": 21038.74609375,
  "area": 24143.220703125,
  "boundingBoxVolume": 76112.51825692593,
  "numberOfFaces": 412530
}

Description: Triggers when a different uuid is loaded.

`features`

Type: Attribute

Accepted values: Objects of the form:

{
  viewOptions: {
    wallThickness: false,
    supportStructure: true,
    perspective: true,
    xRay: true,
    wireFrame: true
  },
  printabilityOptions: {
    wallThickness: true,
    optimization: true,
    shells: true,
    buildChamber: false
  },
  parameterOptions: {
    unitToggle: true,
    dimension: true,
    volume: true,
    area: true,
    boxVolume: true,
    faces: true
  },
  downloadOptions: {
    original: true,
    optimized: true
  }
}

For Vue: Set the object using :features="JSON.stringify(features), where
features is an object of the form described above.

Description: Enables/Disables the specified features. Note that all features
are enabled by default. In order to disable individual features, e.g. the wall
thickness, it suffices to pass {viewOptions: {wallThickness: false}}.

`options`

Type: Attribute

Accepted values: Objects of the form:

{
  collapsedSidePanel: true,
  downloadFileName: 'Model Name'
}

For Vue: Set the object using :features="JSON.stringify(options), where options is an object of the form described above.

Description: Allows configuring settings for the 3D Viewer.

PROPERTY	DESCRIPTION	TYPE	ACCEPTED VALUES	DEFAULT

PROPERTY	DESCRIPTION	TYPE	ACCEPTED VALUES	DEFAULT
collapsedSidePanel	Whether the Side Panel is collapsed or not at start up.	Boolean	true, false	false
downloadFileName	Filename for files accessible through the Download tab.	String	any string	internal file ID

`locale`

Type: Attribute

Accepted values: 'en', 'de', 'fr', 'it' and 'ja'

Description: Sets the language.

`watchCssVars`

Type: Attribute

Accepted values: 'true' and 'false'

Description: Enable/Disable watching of CSS custom property changes using

css-vars-ponyfill in old browsers.

Set to false if you are already using the same or a similar ponyfill.

Styling

Styling can be achieved through the use of CSS custom properties.

threeyourmind-viewer-sdk {
	--primary-10: #eafaeb;
	--primary-50: #31de57;
	--primary-60: #2cc434;
	--primary-70: #26ab31;
}

Custom styling is not supported for IE11.

Two way bindings

Each two-way bound attribute has a corresponding event. The binding should

therefore make sure to update the local property when the event fires. Example

Angular:

app.component.html

<threeyourmind-viewer-sdk [unit]="unit" (unitChanged)="onUnitChanged($event)">
</threeyourmind-viewer-sdk>

app.component.ts

import { Component } from '@angular/core';

@Component({
  templateUrl: './app.component.html',
  ...
})
export class AppComponent {
  unit: string

  onUnitChanged(event) {
    // Hold on to the new unit to avoid overriding
    // when the component re-renders.
    // This is not necessary when only reacting
    // to the event.
    this.unit = event.detail[0]
  }
}