Versions Compared

Old Version 2

changes.mady.by.user Santiago Balladares

Saved on

compared with

New Version 3

changes.mady.by.user Santiago Balladares

Saved on

Key

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

...

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:

    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

  1. Add CUSTOM_ELEMENTS_SCHEMA to your src/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 { }

  2. Allow JavaScript files in your tsconfig.json:

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

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

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

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

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

    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} />
  }
}

  2. 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

  1. 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'

  2. Import the polyfills in your index.js:

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

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

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

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

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