💄new default 3d viewer

src/components/renderer/file/Model.vue

 <template>
-  <iframe
-    id="frame"
-    ref="frame"
-    title="titre"
-    :data-url="file.url"
-    src="/3dhop.html"
-  >
-  </iframe>
+  <div id="hop__container" class="d-flex" @contextmenu.prevent="()=>{}">
+    <HopTools v-if="initialized" :presenter="presenter" :open.sync="toolAccess"/>
+    <transition name="slide">
+      <v-list-item
+          v-if="!toolAccess"
+          id="toolbar"
+          @click="toolAccess = !toolAccess"
+          dense
+          shaped
+      >
+        <v-icon>mdi-tools</v-icon><v-icon>mdi-chevron-right</v-icon>
+      </v-list-item>
+    </transition>
+    <div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()">
+      <div id="tdhlg" @click="followCredits">
+        Powered by 3DHOP<br/>CNR &nbsp;&ndash;&nbsp; ISTI
+      </div>
+      <canvas id="draw-canvas" :class="canvasClasses"/>
+    </div>
+  </div>
 </template>
 
 <script>
+import SphereTrackball from '@/assets/3dhop/trackball_sphere'
+import { Presenter } from '@/assets/3dhop/presenter'
+import MobileMixin from '@/mixins/MobileMixin'
+import HopTools from '@/components/renderer/file/model/HopTools'
+
 
 export default {
-  name: "Hopla",
+  name: "Model",
+  mixins: [MobileMixin],
+  components: {HopTools},
   props: {
-    file: Object
+    file: Object,
+    decimals: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {
+      /**
+       * @type {string}
+       * One of 'grey', 'cyan', 'light', 'dark'
+       */
+      bgClass: 'dark',
+      initialized: false,
+      presenter: {},
+      toolAccess: false,
+    }
+  },
+  computed: {
+    canvasClasses() {
+      return {
+        measuring: this.presenter._isMeasuringDistance
+            || this.presenter._isMeasuringPickpoint,
+        [this.theme]: true
+      }
+    },
+    theme() {
+      return this.$vuetify.theme.dark ? 'dark' : 'light'
+    },
+  },
+  mounted() {
+    this.presenter = new Presenter("draw-canvas");
+    this.presenter.init3dhop();
+    this.setup3dhop()
   },
-  // data() {
-  //   return {
-  //     fileUrl: // "https://s3.unistra.fr/pount-trials/items/gargo.nxz?AWSAccessKeyId=1K0YDMOZXSJYFGCJ28LL&Signature=ibNACVURrj7NG%2F0bLh06kk6EpWo%3D&Expires=1611827365"
-  //     "https://s3.unistra.fr/pount-trials/items/gargo.ply?AWSAccessKeyId=1K0YDMOZXSJYFGCJ28LL&Signature=5or7Japh7QfqoJU8ejRrqoONmHA%3D&Expires=1614331804"
-  //     // "models/gargo.nxz"
-  //   }
-  // }
+  methods: {
+    followCredits() {
+      window.open('http://vcg.isti.cnr.it/3dhop/', '_blank')
+    },
+    setup3dhop() {
+      this.presenter.setScene({
+        meshes: {
+          "mesh_1" : { url: this.file.url }
+        },
+        modelInstances : {
+          "model_1" : {
+            mesh  : "mesh_1",
+          }
+        },
+        trackball: {
+          type: SphereTrackball,
+          trackOptions : {
+            startDistance : 2.5,
+            minMaxDist: [0, 3.0]
+          }
+        }
+      })
+      this.initialized = true
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-  iframe {
-    min-height: 710px;
-    height: 100%;
-    width: 100%;
+
+#hop__container {
+  min-height: 710px;
+  height: calc(100vh - 112px);
+  width: 100%;
+  position: relative;
+}
+.tdhop { position:relative; width:100%; height:100%; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
+
+#tdhlg {
+  position:absolute;
+  width:105px;
+  height:13px;
+  right: 2px;
+  bottom: 2px;
+  overflow:hidden;
+  cursor:pointer;
+  color:#909090;
+  text-align:center;
+  text-decoration:none;
+  font-family:verdana;
+  font-style:italic;
+  font-size:10px;
+  line-height:13px;
+  -webkit-user-select:none;
+  -webkit-touch-callout:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  touch-action:none;
+  -ms-touch-action:none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+  transition-property: height;
+  transition-duration: 2s;
+  &:hover {
+    height: 25px;
+    transition-duration: 200ms;
+  }
+}
+
+#toolbar {
+  position:absolute;
+  top:8px;
+  left: 0px;
+  -webkit-user-select:none;
+  -webkit-touch-callout:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  touch-action:none;
+  -ms-touch-action:none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+  z-index: 1;
+  background: rgba(255,255,255,0.3);
+  &.theme--dark {
+    background: rgba(0,0,0,0.3);
+  }
+}
+
+//#toolbar img { margin-bottom:8px; width:50px; height:50px; opacity:0.5; cursor:pointer; -webkit-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; touch-action:none; -ms-touch-action:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
+
+#draw-canvas {
+  width:100%;
+  height:100%;
+  background-repeat:no-repeat;
+  background-position:center center;
+  -webkit-background-size:cover;
+  -moz-background-size:cover;
+  -o-background-size:cover;
+  background-size:cover;
+  outline:none;
+  -webkit-user-select:none;
+  -webkit-touch-callout:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  touch-action:none;
+  -ms-touch-action:none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+  &.cyan {
+    background-image: radial-gradient(circle, #7FFDFC, #0C1A1A );
+  }
+  &.grey {
+    background-image: linear-gradient(#F2F2F2, #645B5C);
   }
+  &.light {
+    background-image: url("/static/skins/backgrounds/light.jpg");
+  }
+  &.dark {
+    background-image: url("/static/skins/backgrounds/dark.jpg");
+  }
+  &.measuring {
+    cursor: crosshair;
+  }
+
+}
+
+.slide-enter-active {
+  animation: slide-in 1s;
+}
+.slide-leave-active {
+  animation: slide-out .3s;
+}
+@keyframes slide-out {
+  0% {
+    margin-left: 0px;
+    opacity: 1;
+    background: transparent;
+  }
+  70%{
+    opacity: 0.7;
+  }
+  100% {
+    margin-left: 56px;
+    opacity: 0;
+  }
+}
+@keyframes slide-in {
+  0% {
+    left: -56px;
+  }
+  100% {
+    left: 0px;
+  }
+}
+
 </style>