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
Unzip the
3yourmind-3d-viewer-sdk-v1.10.1.zip
you received from 3YOURMIND. It contains aweb-component
and a legacyvue-component
.Install the component like any other NPM package:
Code Block npm install [path_to_unpacked_zip]/web-component/3yourmind-3d-viewer-sdk-v1.10.1.tgz
Usage
Choose your preferred JavaScript framework:
Angular
Add
CUSTOM_ELEMENTS_SCHEMA
to yoursrc/app/app.module.ts
:Code Block 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 { }
Allow JavaScript files in your
tsconfig.json
:Code Block { "compilerOptions": { "allowJs": true, } }
Use the 3D Viewer tag in your
app.component.html
:Code Block <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
IE11 Support
Add the webcomponents polyfill to your application, e.g. by modifying your
angular.json
to load it as an external script:Code Block "scripts": [ "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js", ]
Plain JS
Locate the
threeyourmind-viewer-sdk.min.js
inside theweb-component
directory and include it in your HTML file as a script:Code Block <script async src="[path-to-the-3d-viewer-script]/threeyourmind-viewer-sdk.min.js"></script>
Use the 3D Viewer tag as a HTML tag:
Code Block <threeyourmind-viewer-sdk id="threed-viewer"></threeyourmind-viewer-sdk>
React
Create a wrapper component for the 3D Viewer. To your application add a file called
ThreeyourmindViewerSdk.js
with the following content:Code Block 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} /> } }
Use the 3D Viewer wrapper component like any other React component in your application:
Code Block 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
Add the required polyfills by creating a
polyfills.js
file with the following content:Code Block 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'
Import the polyfills in your
index.js
:Code Block import './polyfills.js'; // This import must be the first line of your index.js
Vue
Import the 3D Viewer globally, e.g. inside your
main.js
:Code Block import "@3yourmind/3d-viewer-sdk";
Use the 3D Viewer tag inside any
.vue
file as a HTML tag:Code Block <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
IE11 Support
Add the webcomponents polyfill to your application, e.g. by importing it in your
main.js
:Code Block import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
...