I successfully loaded the FBX format model locally using loader.parse(buffer), but the textures that the model relies on couldn’t load because threejs doesn’t allow loading local resources. How to solve
fbx and textures are in the same folder locally
If you use GLTF instead of FBX, it can embed the textures in the single file .glb.
Only models in fbx format, what then
Host the files using node. Then you can load them like they would be loaded in a normal webpage.
Here’s a guide: three.js docs
Without node, I successfully imported.fbx through loader.parse(arraybuffer, base_dir), but the textures failed because I could not import local resources, I think many people have this situation, can only start a service to run? I just want to import it locally.
threejs prevents loading local textures, but fbx relies on textures, otherwise the model is only black, can anyone fix that?
Almost nobody runs threejs apps by double clicking a local html on your machine. It can be made to work but it’s incredibly tedious. Can you explain Why you need only FBX and only running without serving locally?
Usually we use node and run a command from the commandline which makes a port appear on your machine that you then go to in your browser like:
https://localhost:3000/ or something
Because this is an electron project, you need to import the model locally and only in fbx format
Electron solves that by hosting your app in node. And there is no FBX limitation. Where are you getting your information?
From electrons own marketing material: " Electron embeds Chromium and Node .js to enable web developers to create desktop applications ."
Thank you very much for your reply. In electron, I just want to import a model like a normal desktop app where the user chooses to import a model from the local file system, the model textures is in a separate folder from the model itself, as shown in the screenshot above, it doesn’t matter if the format is fbx or not. I just want to know is it possible to do this with threejs and electron?
If the model and textures are in the same model, it is easy to import them locally with loader.parse(buffer). The problem is that if they are separate, importing textures will report an error due to threejs restrictions
I don’t think it’s a threejs restriction. It’s a browser sandboxing limitation?
The users filesystem is completely invisible to the app unless explicitly granted by the user… and when they drag a file onto your app… they are granting permission for that single file.
If they drag ALL the component files, then you can access them. I have implemented this before. You may run into trouble mapping the requested file names back to the resources that the user dragged onto the page, but there is a mechanism in the threejs loadingmanager that allows you to intercept/redirect URLs as they are requested by the loaders, and map them to other things.
So… I’m not sure what the current state of electron sandboxing is.
I know that if the user drags ALL the files relevant to the FBX, then you should get access.
If they only drag/open the FBX, I am not sure that you will be able to reach into their filesystem to find the other parts, due to the sandboxing.
You might want to ask this in the Electron forums.
The whole multiple files thing is one of the big reasons I prefer formats like GLTF that can have all the components embedded.
Well, maybe we’ll have to find other ways to do it. Thanks again for your reply.
1 Like