I started using React, Typescript and Babylon as my new stack, and I am still looking for best approaches and practices to create my own boilerplate for the 3D projects.
One issue I encountered is this.
I want to have the structure like this
images.ts (where I load all images that I need to create textures from)
textures.ts (where I create texture from the images defined above)
So furthermore I can have like materials.ts and so on.
The point is that in textures.ts I don’t have a “scene” parameter (scene probably is not even created yet at this point). So I can pass “null” as an argument for scene. But this doesn’t work for VideoTexture. Texture has scene as optional parameter, while VideoTexture does not, so I am getting error at runtime.
Makes sense I guess. But I don’t know how to deal with this issue. I would appreciate any ideas that could help improve the structure and fix this issue.
You should try to convert your video to mp4 because *.mov is no longer widely used on the internet. Apple itself generally now uses MP4 for video.
Good stack :), did you try vite ?
Thanks for the advice. I intended to convert those to mp4 at some point
As for the Vite. I just recently started to encounter Vite, and I will most likely include it in my workflow really soon. Need to do some more research though.
if you have the scene ref (useRef?) in your calling code you could try something like:
// in textures.ts - you can add a guard clause scene isn't null if you want
const posterPenguin_texture = (scene: Nullable<Scene | ThinEngine>) => new VideoTexture(posterPenguin, scene, false, false);
// in calling code
import posterPenguin_texture from './textures.ts';
// set the scene somewhere
const sceneRef = useRef<Scene|null>(null);
hard to say without full code, but also if you put the images in /public then you can serve them and your browser will cache them and load on demand. I think what you have there will bundle videos/images.
edit: the error may be how you are passing in the images. you may need to base64 encode and put in
data:... - I haven’t tried with imports before that way.
Hey. I actually solved the issue the with almost exact way you explained.
It is plausible for now. Will probably try to look for more elegant solution in the future.
Thanks @brianzinn. I will mark your answer as solution, as that’s pretty much how I solved it. Also, I will probably ping you from time to time if I need some help, as I am looking for “perfect” architecture to combine Babylon and React, and so far I have many issues that I am slowly clearing up, but from time to time something weird pops up.