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.10.1.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.10.1.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:

   <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
   

IE11 Support

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

   "scripts": [
     "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
   ]
   

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:

   <script async src="[path-to-the-3d-viewer-script]/threeyourmind-viewer-sdk.min.js"></script>
   

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

   <threeyourmind-viewer-sdk id="threed-viewer"></threeyourmind-viewer-sdk>
   

React

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

   import React, { Component } from 'react'
   import '@3yourmind/3d-viewer-sdk'
   
   export default class ThreeyourmindViewerSdk extends Component {
     constructor(props) {
       super(props)
       this.viewerRef = React.createRef()
     }
   
     componentDidMount() {
       this.attributes = Object.keys(this.viewerRef.current.vueComponent._props)
       this.attributes.forEach((attribute) => {
         this.viewerRef.current[attribute] = this.props[attribute]
       })
     }
   
     componentWillReceiveProps(props) {
       this.attributes.forEach((attribute) => {
         if (props[attribute] !== this.props[attribute]) {
           this.viewerRef.current[attribute] = props[attribute]
         }
       })
     }
   
     render() {
       return <threeyourmind-viewer-sdk ref={this.viewerRef} />
     }
   }
   

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

   import React, { Component } from 'react'
   import ThreeyourmindViewerSdk from './ThreeyourmindViewerSdk'
   
   export default class App extends Component {
     constructor(props) {
       super(props)
       this.state = {
         uuid: '1c0edd03-d26b-41c7-b8d6-a2b954397413',
         url: 'http://localhost:8080',
       }
     }
   
     render() {
       return (
         <ThreeyourmindViewerSdk uuid={this.state.uuid} url={this.state.url} />
       )
     }
   }
   

IE11 Support

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

   import 'react-app-polyfill/ie11';
   import 'react-app-polyfill/stable'; // You must add 'react-app-polyfill' to your package.json
   import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'
   

2. Import the polyfills in your index.js:

   import './polyfills.js';  // This import must be the first line of your index.js
   

Vue

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

   import "@3yourmind/3d-viewer-sdk";
   

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

   <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
   

IE11 Support

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

   import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';