I would like to create an environment texture by using a .env file and loading it from the local project directory. When working on a prototype in a playground, i used a GitHub link as file path to the .env file, but now I’d like to load it from the project directory I am working in.
So Far:
const hdrTexture = CubeTexture.CreateFromPrefilteredData("https://raw.githubusercontent.com/MyPrivatePath/environment.env", scene );
What I’d like now:
const hdrTexture = CubeTexture.CreateFromPrefilteredData('src\assets\vr\textures\Environment\environment.env', scene );
The given path to the .env file is not interpreted as a path but as a string and the environment is not defined. I read some things about special loaders for that file format and so on, but I was not sure if that might be an overkill and I am just missing something simple. I would expect that it is possible to just point at the file and use it and that it does not matter if it is located on GitHub or locally…
you cant load assets from a local path via code in a web browser unless the assets and the application exist in the same domain and the browser is running in a server context.
Server context is required for both the asset and the application. If the application doesnt have server context and is run directly on the OS , the browser will not permit javascript execution. If the application is on a server and the asset is not , it will not permit access to those files. otherwise any website could simply dig around and load/read any files from end users machines.
If both the application and the asset are in a server context , Cross domain is restricted by default for security reasons. It is possible to do cross domain loading when the server hosting the assets has a CORS policy set up to permit it.
So with the playground and github , both are in a server context and github does permit cross domain , so it will work.
With the local path , im not sure if you path is local on your OS or on a server. If its on your OS it wont work , if it is on a server it will require an absolute path and also cross domain permissions
So as first mentioned , only when the application and assets are on the same domain in a server context , can you use a relative path as you wish.
So unless I host the whole thing on a server, there is no way for me to use local assets placed in the folder of my local project? Sry for asking the dumb questions but this seems so counterintuitive to me…
With modern build tools like visual studio code / node JS for example, running a project in a server context is trivial. It just creates one on the fly
But thats exactly what I am doing here. My project is running in VS-Code and my .env file is located in the project folder. Might I simply be using the wrong command or path? (the path is provided by VS-Code using the ‘copy relative path’ feature)
It’s an understandable question! What I do in the book as part of Space-Truckers is to load the content into a variable via import then pass that to the constructor for the Cube. By doing that, WebPack knows to bring the asset into the asset bundle and make it available to your app.
As mentioned upthread any local http server will do for running and hosting files locally as well so they can be referred to by URL. Some BJS types that load via URL may require you to modify or otherwise set a base path (I’m looking at you ParticleSystemSet!) in order to get the asset to load.
well looking at your relative path i will say yes because you never need to refer to the src directory , that is normally considered the base of the application. Try your path without that.
(take note there are sometimes other settings involved with how local relative paths are configured in these node apps that use build tools like webpack for example. Vue.js and webpack are guitly of having issues with this at times and then you need to go manually change the “public” path base string )
anyway , im betting it works once you remove src from the path ( crossing fingers haha )
( crossing fingers haha )