Commit 22b427fb authored by Jean Rabreau's avatar Jean Rabreau
Browse files

馃拕new default 3d viewer

parent 97f02c71
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment