So I’m kinda tiring of this particular site generator, and going more vanilla, less bloated, but I’ve had this around for a while and would like to see if I can get it working again. I posted in the gatsby github discussion, but it may as well be something I’m doing wrong with babylonjs.
I had starter in a previous version of gatsby where i was able to load a .glb file from a static folder, using the imported BabylonJS loaders. I didn’t have to import the glb into the file at that point- the relative url from the static folder (/) just went in the import function and it loaded. I am trying it in a new starter, newer version of gatsby, and It wont load from static anymore, and none of my attempts to import it in the js file are successful. I have the loader package installed, and using import exactly the same way as I did before.
import * as BABYLON from '@babylonjs/core';
import "@babylonjs/loaders/glTF";
import backgroundImage from "../assets/shanghai-bund.jpg";
import car from "../assets/Renault_Alpine_blendswap_cc0.glb";
now if i comment out that last line with “import car”, the scene loads with just the babylon js primitives, ground and photodome for the background. So there’s nothing wrong with my path, or babylonJS itself loading.
When I uncomment that import car line again, I get the following error, and the server stops:
ModuleParseError: Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
ok well now obviously I need the loader. but it’s imported as shown above, and of course the package is installed. There is another thread here I saw where this is essentially what is shown. Here is my repo on github, if anyone’s interested. I wish i could set up a better playground scene. I tried playcode but had trouble with dependencies.
I’ve tried different ways of importing. Append, using Asset Manager, and loadFromMemory. Load from memory takes the whole URL, so I thought that might help, but maybe I’m missing something there. But even with all the import code commented out, the import line still throws an error. But here are the ones i’ve alternately tried, (uncommenting one at a time). I’ve also tried putting them in the SceneComponent file, just to see. But i shouldn’t really have to do that, and it had no effect.
//IMPORT USING APPEND
// BABYLON.SceneLoader.Append(
// "../assets/",
// "Renault_Alpine_blendswap_cc0.glb",
// scene,
// null
// )
// TRYING TO IMPORT WTIH ASSET MANAGER
// const assetsManager = new BABYLON.AssetsManager(scene);
// const meshTask = assetsManager.addMeshTask("car task", "", "../assets/", "Renault_Alpine_blendswap_cc0.glb");
// meshTask.onSuccess = function (task) {
// task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
// }
// assetsManager.load();
//TRYING TO LOAD FROM MEMORY
// async function loadFromMemory (){
// const assetArrayBuffer = await BABYLON.Tools.LoadFileAsync(car, true);
// //loading from the static folder doesn't work anymore either
// const assetArrayBuffer = await BABYLON.Tools.LoadFileAsync("/Renault_Alpine_blendswap_cc0.glb", true);
// const assetBlob = new Blob([assetArrayBuffer]);
// const assetUrl = URL.createObjectURL(assetBlob);
// await BABYLON.SceneLoader.AppendAsync(assetUrl, undefined, scene, undefined, ".glb");
// }
// loadFromMemory();
If this doesn’t work, I’m going to scrap it and build around Brian Zinn’s create-react-app implementation. I’m creating repos of as many different JS frameworks as I can get to, to demo use of BJS