69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
|
<div class="viewer-container">
|
|
<vue3dLoader
|
|
:filePath="filePath"
|
|
height="600"
|
|
width="1440"
|
|
:controlsOptions="{
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
enableRotate: true,
|
|
}"
|
|
:backgroundColor="'#000000'"
|
|
:backgroundAlpha="0.0"
|
|
:rotation="rot"
|
|
:lights="lights"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { useRafFn } from "@vueuse/core";
|
|
|
|
const props = defineProps(["filePath"]);
|
|
const rot = ref({ x: 0, y: Math.PI / 2, z: 0 });
|
|
|
|
const router = useRafFn(() => {
|
|
rot.value = { x: 0, y: rot.value.y - 0.01, z: 0 };
|
|
// console.log('hh s')
|
|
});
|
|
|
|
const lights = ref([
|
|
{
|
|
type: "AmbientLight",
|
|
color: "white",
|
|
},
|
|
{
|
|
type: "DirectionalLight",
|
|
position: { x: 100, y: 10, z: 100 },
|
|
color: "white",
|
|
intensity: 8,
|
|
},
|
|
{
|
|
type: "PointLight",
|
|
color: "#000000",
|
|
position: { x: 200, y: -200, z: 100 },
|
|
intensity: 1,
|
|
},
|
|
{
|
|
type: "HemisphereLight",
|
|
skyColor: "#FFFFFF",
|
|
groundColor: "#000000",
|
|
position: { x: 200, y: -200, z: 100 },
|
|
},
|
|
]);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.viewer-container{
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
:deep(.viewer-canvas){
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
</style>
|