[update]

Author: JunyaoHu

src/components/sections/GaussianSplats3D.vue

@@ -43,22 +43,45 @@ onMounted(() => {
           <a href="https://github.com/mkkellogg/GaussianSplats3D" target="_blank">GaussianSplats3D</a>,
           we can visualize 3DGS models here.
           </p>
-          <el-row justify="center">
-            <el-col :xs="20" :sm="24" >
-              <div id="gs"></div>
-            </el-col>
-          </el-row>
-          
+          <el-col :xs="16" :sm="21" style="margin: 0px auto;">
+            <div id="gs" class="gs-container"></div>
+          </el-col>
         </el-col>
       </el-row>
     </div>
   </template>
 
 
-<style scoped>
+<style>
 
-#gs {
-    height: 350px;
+.gs-container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
 }
 
-</style>
+.spinnerPrimary0 {
+  display: none !important;
+}
+
+.spinnerOuterContainer0 {
+  height: 100% !important;
+  margin: 0 auto !important;
+  top: 0 !important;
+  left: 0 !important;
+}
+
+.spinnerContainerPrimary0 {
+  padding-top: 0% !important;
+  position: relative !important;
+  transform: none !important;
+  width: fit-content !important;
+  margin: 0 auto !important;
+  left: 0 !important;
+  padding: 10px 20px !important;
+}
+
+.messageContainerPrimary0 {
+  padding-top: 0% !important;
+}
+
+</style>

src/components/sections/Model3D.vue

@@ -1,27 +1,6 @@
 <script lang="ts" setup>
 import { vue3dLoader } from "vue-3d-loader";
-import { ref } from "vue";
-const filePath = ref();
-filePath.value = [
-  "./model3d/fbx/Samba Dancing.fbx",
-  "./model3d/collada/pump/pump.dae",
-  "./model3d/ply/Lucy100k.ply",
-];
-const position = ref();
-position.value = [
-  { x: 100, y: 100, z: 100 },
-  { x: 300, y: 300, z: 300 },
-];
-const rotation = ref();
-rotation.value = [
-  { x: 0, y: 0, z: 0 },
-  { x: 10, y: 1, z: 1 },
-];
-const scale = ref();
-scale.value = [
-  { x: 5, y: 5, z: 5 },
-  { x: 3, y: 3, z: 3 },
-];
+
 </script>
 
 <template>
@@ -39,26 +18,32 @@ scale.value = [
         <a href="https://github.com/king2088/vue-3d-loader" target="_blank">vue-3d-loader</a>,
         we can visualize these 3D models here. It supports dae, fbx, gltf(glb), obj, ply, stl models.
         </p>
-        <el-row justify="center">
-          <el-col :xs="20" :sm="12" >
-            <vue3dLoader
-              filePath="./model3d/collada/stormtrooper/stormtrooper.dae"
-              :cameraPosition="{ x: -8, y: 10, z: -10 }"
-              :height="350"
+        <el-row justify="space-evenly">
+          <el-col :xs="16" :sm="10" >
+            <div class="threed-container">
+              <vue3dLoader
+              filePath="./model3d/obj/male02.obj"
+              mtlPath="./model3d/obj/male02.mtl"
+              outputEncoding="sRGB"
+              :cameraPosition="{ x: 0, y: 0, z: 300 }"
+              :scale="{ x: 1, y: 1, z: 1 }"
+              :position="{ x: 0, y: 0, z: 0 }"
+              :rotation="{ x: 0, y: 0, z: 0 }"
               :enableDamping="true"
               :dampingFactor="0.05"
-              :backgroundColor="0xccddff"
+              :backgroundColor="'#f2f2f2'"
             />
+            </div>
           </el-col>
-          <el-col :xs="20" :sm="12" >
+          <el-col :xs="16" :sm="10" >
             <vue3dLoader
-              :filePath="filePath"
-              :scale="scale"
-              :position="position"
-              :rotation="rotation"
+              filePath="./model3d/ply/Lucy100k.ply"
               :cameraPosition="{ x: 100, y: 200, z: 3000 }"
-              :parallelLoad="true"
-              :height="350"
+              :scale="{ x: 1, y: 1, z: 1 }"
+              :position="{ x: 100, y: 100, z: 100 }"
+              :rotation="{ x: 0, y: 3, z: 0 }"
+              :enableDamping="true"
+              :dampingFactor="0.05"
               :backgroundColor="0xeeeeee"
             ></vue3dLoader>
           </el-col>
@@ -70,6 +55,10 @@ scale.value = [
   </div>
 </template>
 
-<style scoped>
-
+<style>
+.viewer-canvas {
+  width: 100% !important;
+  height: auto !important;
+  aspect-ratio: 1 / 1 !important;
+}
 </style>