renderer3d-model v2.1.3

Renderer3D

Install

yarn add renderer3d-model

Usage

  import React, { Component, createRef } from "react"

import Renderer3D, {
  Loading,
  InfoPanel,
  ConfigGui,
  Controls,
} from "./renderer3d"

class App extends Component {
  state = {
    url: "https://s3.us-east-2.amazonaws.com/idea-files-s3/1508165679197",
  }
  constructor(props) {
    super(props)
    this.render3d = createRef()
    this.loading = createRef()
    this.infoPanel = createRef()
    this.configGui = createRef()
    this.renderer = {}
  }
  componentDidMount() {
    this.loadModel()
  }

  loadModel = () => {
    this.renderer = new Renderer3D({
      modelUrl: this.state.url,
      loading: this.loading.current,
      infoPanel: this.infoPanel.current,
      container: this.render3d.current,
      configGui: this.configGui.current,
      editable: true,
      initial: {
        orbit: {
          position: {
            x: 17,
            y: 13,
            z: 550,
          },
          rotation: {
            x: 1.633995837560991,
            y: 0.049426731896162514,
            z: -3.001684471665421,
          },
        },
        attachments: [
          {
            position: {
              x: 8.622963458826547,
              y: -15.567126364801993,
              z: 43.52801210469018,
            },
            data: {
              title: "Etiqueta 1",
              content:
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in ligula dapibus, tempor nunc in, interdum ante. Etiam luctus et.",
            },
          },
          {
            position: {
              x: 21.519644123023504,
              y: -12.001333004591629,
              z: 96.02675761908205,
            },
            data: {
              title: "Etiqueta 2",
              content:
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in ligula dapibus, tempor nunc in, interdum ante. Etiam luctus et.",
              screenPosition: {
                rotation: {
                  x: 1.5699221202943565,
                  y: -0.007921343880529572,
                  z: -3.0901915692326813,
                },
                position: { x: -5, y: -1, z: 290 },
              },
            },
          },
        ],
      },
      callbacks: {
        addAttachment: console.log,
        removeAttachment: console.log,
        updateAttachmentData: console.log,
        updateAttachmentDefaultScreen: console.log,
        updateAttachmentPosition: console.log,
        updateDefaultOrbit: console.log,
      },
    })
    this.renderer.animate()
  }

  reset = () => {
    this.renderer.resetControls()
  }
  setCurrentAsInitial = () => {
    this.renderer.setCurrentAsInitial()
  }

  render() {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
        }}
      >
        <form
          onSubmit={e => {
            e.preventDefault()
            this.loadModel()
          }}
        >
          <input
            value={this.state.url}
            onChange={({ target: { value: url } }) => this.setState({ url })}
          />
        </form>
        <div style={{ height: 800 }}>
          <div
            ref={this.render3d}
            style={{ width: 1200, height: 800, position: "absolute" }}
          >
            <Loading ref={this.loading} />
            <InfoPanel ref={this.infoPanel} />
            <ConfigGui ref={this.configGui} />
            <Controls />
          </div>
        </div>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.setCurrentAsInitial}>ChangeInitial</button>
      </div>
    )
  }
}

export default App