How to use three.js to load `.glb` 3D model in Electron?

[PublicWorld]

Hi Bro, I used this template and tried to load a .glb 3D model in Electron using three.js, but couldn't success. I tried both the local .glb and the remote one without success, always just a black background. I spent 2 days without finding a solution, also tried to add assetsInclude: ['**/*.glb'] to vite.config.js, also can't render. Refer to this guide, and glb file in Public directory.

• https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

So have to resort to you, here is the project file, can you help to check this cause when you have time? Thank you very very much!

electron-vue-template.zip

[Deluze]

Excuses for the late reply. I don't think this issue is related to the template itself.

In case you are still struggling with this, there's a slight gimmick with referencing assets between the dev build and dist build. Try referring to your model like so:

<script setup>
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import modelPath from "../models/myModel.glb"

new GLTFLoader().load(modelPath)
</script>

This example should work regardless of environment. I'm not experienced with three.js though.

Closing this issue as it's been open for a while. In case if you are still running into this issue, or someone else is facing this exact issue, please comment.