3D Viewer SDK

The 3D Viewer SDK displays 3D files and 3D printing data like wall thickness, support structure and printability analysis in the web browser. It interacts with the 3YOURMIND server which provides 3D file conversion, analysis and optimization.

Installation

1. Unzip the 3yourmind-3d-viewer-sdk-v1.12.0.zip you received from 3YOURMIND. It contains a web-component and a legacy vue-component.

2. Install the component like any other NPM package:

   npm install [path_to_unpacked_zip]/web-component/3yourmind-3d-viewer-sdk-v1.12.0.tgz

Usage

Choose your preferred JavaScript framework:

• Angular

• Plain JS

• React

• Vue

Angular

1. Add CUSTOM_ELEMENTS_SCHEMA to your src/app/app.module.ts:

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // You can also import the 3D Viewer SDK here directly import '@3yourmind/3d-viewer-sdk' @NgModule({ ... schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { }

2. Allow JavaScript files in your tsconfig.json:

   { "compilerOptions": { "allowJs": true, } }

3. Use the 3D Viewer tag in your app.component.html:

IE11 Support

1. Add the webcomponents polyfill to your application, e.g. by modifying your angular.json to load it as an external script:

Plain JS

1. Locate the threeyourmind-viewer-sdk.min.js inside the web-component directory and include it in your HTML file as a script:

2. Use the 3D Viewer tag as a HTML tag:

React

1. Create a wrapper component for the 3D Viewer. To your application add a file called ThreeyourmindViewerSdk.js with the following content:

2. Use the 3D Viewer wrapper component like any other React component in your application:

IE11 Support

1. Add the required polyfills by creating a polyfills.js file with the following content:

2. Import the polyfills in your index.js:

Vue

1. Import the 3D Viewer globally, e.g. inside your main.js:

2. Use the 3D Viewer tag inside any .vue file as a HTML tag:

IE11 Support

1. Add the webcomponents polyfill to your application, e.g. by importing it in your main.js:

Authors

• Dennis Hezel, dh@3yourmind.com

• Santiago Balladares, sbo@3yourmind.com