...
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 the
3yourmind-3d-viewer-sdk-v1.1012.10.zip
you you received from 3YOURMIND. It contains a aweb-component
and and a legacy legacyvue-component
.Install the component like any other NPM package:
Code Block language bash npm install [path_to_unpacked_zip]/web-component/3yourmind-3d-viewer-sdk-v1.1012.10.tgz
Usage
Choose your preferred JavaScript framework:
Angular
Add Add
CUSTOM_ELEMENTS_SCHEMA
to your to yoursrc/app/app.module.ts
:Code Block language 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 { }
Allow JavaScript files in your your
tsconfig.json
:Code Block language js { "compilerOptions": { "allowJs": true, } }
Use the 3D Viewer tag in your your
app.component.html
:Code Block language html <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
IE11 Support
Add the the webcomponents polyfill polyfill to your application, e.g. by modifying your your
angular.json
to to load it as an external script:Code Block language js "scripts": [ "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js", ]
Plain JS
Locate the the
threeyourmind-viewer-sdk.min.js
inside the inside theweb-component
directory directory and include it in your HTML file as a script:Code Block language html <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 language html <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 called
ThreeyourmindViewerSdk.js
with with the following content:Code Block language js 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 language js 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<http://localhost:8080',> } } render() { return ( <ThreeyourmindViewerSdk uuid={this.state.uuid} url={this.state.url} /> ) } }
IE11 Support
Add the required polyfills by creating a a
polyfills.js
file file with the following content:Code Block language js 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 your
index.js
:Code Block language js import './polyfills.js'; // This import must be the first line of your index.js
Vue
Import the 3D Viewer globally, e.g. inside your your
main.js
:Code Block language js import "@3yourmind/3d-viewer-sdk";
Use the 3D Viewer tag inside any any
.vue
file file as a HTML tag:Code Block language html <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>
IE11 Support
Add the the webcomponents polyfill polyfill to your application, e.g. by importing it in your your
main.js
:Code Block language js import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
Authors
Dennis Hezel, dh@3yourmind.com
Santiago Balladares, sbo@3yourmind.com