Good afternoon, Babylon.js community!
I apologize in advance, I’m using auto-translate.
I wanted to ask a question about delivering resources to the end user, on the client.
I’ve organized the delivery of the model from my server and unpacked it with JSZip, unfortunately my hopes of rendering it simply didn’t come true
I read a lot of documentation again, but apparently I don’t understand how to put the model ( it’s an object with files in memory ) on the scene(
I will attach everything that is required of me, I don’t even know what yet, except for the component - which acted as a test subject for me in this research ( I hope I won’t be stoned for the code - I was just trying to get results).
import {
Scene,
WebGPUEngine,
Vector3,
SceneLoader,
FilesInputStore,
AssetsManager,
} from '@babylonjs/core';
import Menu from '../root';
import { StaticCamera } from '../MenuProviders/Cameras/StaticCamera';
import { DevKit } from '../../DevelopEntity/DevKit';
import '@babylonjs/loaders/glTF';
import { PF_HemisphericLight } from '../MenuProviders/Light/HemisphericLight';
export class Main {
/**
* Движок.
*/
private engine;
/**
* Канвас
*/
private viewport;
/**
* Родитель
*/
private root;
/**
* Ресурсы для построения сцены
*/
private resources;
/**
* TODO: Надо описать
* @param engine
* @param viewport
* @param root
*/
constructor(
engine: WebGPUEngine,
viewport: HTMLCanvasElement,
resources: any,
root: Menu,
) {
this.engine = engine;
this.viewport = viewport;
this.resources = resources;
this.root = root;
}
scene() {
const scene = new Scene(this.engine);
new DevKit(
{ scene },
{
scene: scene,
viewport: this.viewport,
target: Vector3.Zero(),
},
);
// CODE_CODE_CODE_CODE_CODE_CODE_CODE
// console.log(this.resources.files); // тут файлы которые я распаковал с помощью JSZip
// Подготовка файлов для загрузки
const files = this.resources.files;
const filesToLoad: { [key: string]: File } = {};
let url = '';
// Используем Object.keys для перебора всех файлов
Object.keys(files).forEach((fileName) => {
console.log(fileName);
const file = files[fileName];
const blob = new Blob([file], { type: 'application/octet-stream' });
if(fileName.includes('.gltf')) {
url = URL.createObjectURL(blob);
}
const fileObj = new File([blob], file.name);
filesToLoad[file.name] = fileObj;
});
const rootURL = url;
const fileName = 'adamHead.gltf';
SceneLoader.Append(rootURL, fileName, scene);
// console.log(this.resources.files); // тут файлы которые я распаковал с помощью JSZip
// // Подготовка файлов для загрузки
// const files = this.resources.files;
// const assetArrayBuffer = Tools.LoadFileAsync(files['adamHead.gltf'], true);
// console.log(assetArrayBuffer);
// Локальная мастер модель
// Загружаем модель в сцену
// const rootURL = 'adam/';
// const fileName = 'adamHead.gltf';
// SceneLoader.Append(rootURL, fileName, scene);
// CODE_CODE_CODE_CODE_CODE_CODE
/**
* Камера
*/
new StaticCamera(
scene,
'menu__main_camera',
this.viewport,
new Vector3(0, 0, -10),
);
/**
* Свет
*/
const mainLigth = new PF_HemisphericLight(
'menu__main_spot_ligth',
scene,
new Vector3(-4.6, 4.1, -14.9)
);
mainLigth.setIntensity(0.2);
/**
* TODO: возможно стоит разобраться с clone() ради оптимизации
*/
const mainLigth_Two = new PF_HemisphericLight(
'menu__main_spot_ligth_two',
scene,
new Vector3(4.6, 4.1, -14.9)
);
mainLigth_Two.setIntensity(0.2);
return scene;
}
}
Thanks in advance to everyone who brought my problem to my attention!