Yes because you can not use a local path from disc like that. Change the paths to āassets/yourglbname.glbā instead
Or ./assets/forRecording.glb"
But wait why do you do this in the first place you dont need to do this
It was just meant as an example for how to use those callbacks the files are already referenced and loaded via the engine codegen. You only maybe want the line 36 to prevent the default loading screen from showing up and to add your own loading image
I can try to make you an example tomorrow
It would be great if you have the time. Itās a little bit of chinese for me:PandaSad: . Now it looks like this. It freeze because of loading, also in the scene loaded I canāt use scroll.
by user 328144332622266369
Hi @Nebula(Larisk) Iām working on making this whole process a bit easier and just assigning a loadingScene
to the SceneSwitcher (which would then be the scene you have already with the fixed camera and cube animation) - hereās a technical test
The setup will then be just: assign the scene you want to be visible while another scene is loading in the SceneSwitcher
And here is a little bit of code that handles adding and removing the HTML logo (I add it behind the 3d scene here because I set the camera to render a transparent background - but you can also just add it on top). I will add the code for this to the samples once Iām done
import { Behaviour, delay, ISceneEventListener } from "@needle-tools/engine";
// Put this in the root of your loading scene
export class SceneRoot extends Behaviour implements ISceneEventListener {
private _htmlElement?: HTMLElement;
async sceneOpening(): Promise<void> {
if (!this._htmlElement) {
this._htmlElement = document.createElement("div");
this._htmlElement.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
const logo = document.createElement("img");
logo.src = "https://engine.needle.tools/branding/needle-logo.png";
logo.style.cssText = `
width: 50%;
height: auto;
`;
this._htmlElement.appendChild(logo);
}
this.context.domElement.parentElement?.prepend(this._htmlElement);
}
async sceneClosing(): Promise<void> {
// Not necessary, just so that the loading scene is visible for some time
await delay(1000);
// Make sure to remove your HTML overlay
this._htmlElement?.remove();
}
}
You could also just take an existing HTML element in your index.html to add/remove it (you dont have to generate this in code, itās just easier for the samples)
It will be included in the next update (this feature)
Wow, this makes everything easier! Thatās awesome!:gentleblob: :blobaww:
by user 328144332622266369
Iāll also added a new attribute to automatically hide the default loading overlay if you want <needle-engine hide-loading-overlay></needle-engine>
(also next release)
Note that there are some attributes already to customize how it looks in the table under Loading Display
Needle Engine Attributes | Needle Engine Documentation
You might need to clear your browser cache (or reload with CTRL+SHIFT+R on chrome) to see it. Sometimes updates are not visible because the page is still cached
E.g. the default loading can easily be changed to this with just some html attributes - since the engine itself still needs to load this loading overlay would still be visible for a moment (unless you disable it with the attribute of course )
Thank you so much for adding this features! Canāt wait to play with them! I will study and follow your instructions, and hopefully get to the desired output.
by user 328144332622266369
Hi, the feature is added in the latest release. so now you can add a LoadingScene
(it can be a scene or prefab refernence) to the SceneSwitcher component. Your āMainSceneā should be really minimal so it loads super fast. See the screenshot above, I just have an GameObject with the SceneSwitcher + another GameObject with the ExportInfo. Thatās it
here is a sample script that you can add to the root object of your āLoadingSceneā to receive callbacks when the scene is being loaded/unloaded. You can trigger animations from there if you want to make a nicer transition. But itās optional. If you dont use that then the loading scene will just be removed instantly.
For completeness: in my test scene I use an animator for scaling my loading content up and down (to make the transition a bit smoother). You can totally do something like we did in https://app.songsofcultures.com now where the content is nicely hidden/animated into the scene when a scene loads with these callbacks or display some other custom loading overlay if you want.
But as said above: itās optional if this doesnt exist the scene will just be replaced instantly without any transition which might or might not be desired
Okay, Iāve tried today, and have some questions. The sceneSwitcher has to be attached to SceneRoot of the main Scene(not Loading)? Also, the loading scene has to be a needle scene? And do I need to add loadstart to ? If yes, in which file? because I also have Vue in the project of website.
by user 328144332622266369