Versions Compared

Old Version 4

changes.mady.by.user Felix Bauer

Saved on

compared with

New Version Current

changes.mady.by.user Dennis Hezel

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Info

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

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 the 3yourmind-3d-viewer-sdk-v1.1012.10.zip you you received from 3YOURMIND. It contains a a web-component and and a legacy legacy vue-component.

  2. Install the component like any other NPM package:

    Code Block
    languagebash
    npm install [path_to_unpacked_zip]/web-component/3yourmind-3d-viewer-sdk-v1.1012.10.tgz


 

Usage

Choose your preferred JavaScript framework:


 

Angular

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

    Code Block
    languagets
    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 your tsconfig.json:

    Code Block
    languagejs
    {
  "compilerOptions": {
    "allowJs": true,
  }
}

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

    Code Block
    languagehtml
    <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>

IE11 Support

  1. 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
    languagejs
    "scripts": [
  "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
]


 

Plain JS

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

    Code Block
    languagehtml
    <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:

    Code Block
    languagehtml
    <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 called ThreeyourmindViewerSdk.js with with the following content:

    Code Block
    languagejs
    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:

    Code Block
    languagejs
    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

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

    Code Block
    languagejs
    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 your index.js:

    Code Block
    languagejs
    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 your main.js:

    Code Block
    languagejs
    import "@3yourmind/3d-viewer-sdk";

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

    Code Block
    languagehtml
    <threeyourmind-viewer-sdk></threeyourmind-viewer-sdk>

IE11 Support

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

    Code Block
    languagejs
    import '@webcomponents/webcomponentsjs/webcomponents-bundle.js'; 


 

Authors