Unable to load any of file (404 Not Found or undefined object)

[gabrielgriesser]

It's been 5 hours now that I'm looking for how to manage a file with your VueJS component. I use Vue3 and vue-3d-loader 2.1.3

I am trying to load an .OBJ, .GLTF or .MTL file. Whether it's in the public folder, as an assets or even loaded via an input form, I always get EITHER a 404 error OR an exception (Cannot read properties of undefined (reading 'split'))

Has anyone had this problem before?

[Smartich0ke]

Can you provide a snippet of the code you are using to load the component and the file? It look like either the file is not in the right place or that folder can't be accessed through the site URL. Try pasting http://localhost:8080/part-details/TEST.obj into the address bar of your brower and checking that it downloads the file.

[king2088]

It's been 5 hours now that I'm looking for how to manage a file with your VueJS component. I use Vue3 and vue-3d-loader 2.1.3

I am trying to load an .OBJ, .GLTF or .MTL file. Whether it's in the public folder, as an assets or even loaded via an input form, I always get EITHER a 404 error OR an exception (Cannot read properties of undefined (reading 'split'))

Has anyone had this problem before?

• Please ensure http://localhost:8080/part-details/TEST.obj file can be downloaded through the browser.
• vue-3d-loader component only support url path, not support input file. If you want load input file, may be you need upload the file to server and get the file url path.
• In the local environment, files must be placed in the public directory. Such as your file http://localhost:8080/part-details/TEST.obj, the TEST.obj file must in /public/part-details/ directory. Not support assets dirctory.

[gabrielgriesser]

Of course.

Here is the HTML Vue.JS part

<template>
  <div class="main">
    <div class="data">
      <router-link :to="'/offer-details/' + this.part.offerId" class="text back-button">Retour à l'offre</router-link>
    </div> 
    <div class="screenshot">
      <img v-if="screenshotUrl.length > 0 && part.status != 'error'" :src="screenshotUrl" width="128" height="128" />
    </div>
    <div>
      <dxf-card v-for="dxfFileId in part.dxfIds" :dxf-id="dxfFileId" :key="dxfFileId" />
    </div>
    <div>
      <input type="file" ref="file" @change="readFile()" />
      <vue3dLoader :height="200" :file-path="this.file" :camera-position="{ x: 1, x: -5, z: -20 }"
        :backgroundColor="0xff00ff"></vue3dLoader>
    </div>
  </div>
</template>

The Javascript part:

<script>
import Axios from "axios";
import DxfCard from "@/components/DxfCard";
import BackendService from "@/services/BackendService";
import DateTimeService from "@/services/DateTimeService";
import { vue3dLoader } from "vue-3d-loader";

export default {
  name: "PartDetails",

  components: {
    DxfCard,
    vue3dLoader
  },

  props: {
    partId: {}
  },

  data() {
    return {
      part: {},
      screenshotUrl: {},
      file: "TEST.obj", //Should load the public/TEST.obj file...
    }
  },

  mounted() {
    this.load();
  },

  methods: {
    readFile() {
      this.file = this.$refs.file.files[0].name;
      console.log("My file is : " + this.file);
    },
  }
}
</script>

And finally, my folders architecture (My component is the PartDetails.vue) :

I try to load TEST.obj from public folder, it doesn't work. Then I try to load file from another folder (with the input form), it doesn't work. Even if I try to load TEST.obj from public, assets or even components folder

[gabrielgriesser]

Okay it works !

I had to remove the camera position from vue3dloader component so I can see the object !

Thank you very much to all :) Have a nice day

[king2088]

Okay it works !

I had to remove the camera position from vue3dloader component so I can see the object !

Thank you very much to all :) Have a nice day

That's great. If this plug-in can help you. Please give me a star. thanks