So we continued working on the the function to load our data from string. The Error with the wrong base64 String we have been able to solve. We know receive the base64 String in a correct Format. The loading from String works fine with the following method:
return BABYLON.SceneLoader.ImportMeshAsync(null, "", base64_model_content, scene, undefined, undefined, undefined, ".glb")
.then(function (result) {
let bimProducts = geometryMap[checksum];
positionMesh(result.meshes[1], bimProducts[0].position, bimProducts[0].rotation, bimProducts[0].ifc_guid);
assetContainer.meshes.push(result.meshes[1]);
for (let i = 1; i < bimProducts.length; i++) {
let clone = result.meshes[1].clone(bimProducts[i].ifc_guid);
positionMesh(clone, bimProducts[i].position, bimProducts[i].rotation, bimProducts[i].ifc_guid);
assetContainer.meshes.push(clone);
}
});
Now we implemented Babylonjs into React. The loading function and everything remains the same. Also the base64 Strings are in correct format. Here is one for example:
Z2xURgIAAAAcBQAAEAQAAEpTT057ImFzc2V0Ijp7InZlcnNpb24iOiIyLjAiLCJnZW5lcmF0b3IiOiJPcGVuIEFzc2V0IEltcG9ydCBMaWJyYXJ5IChhc3NpbXAgdjUuMC4wKSJ9LCJhY2Nlc3NvcnMiOlt7ImJ1ZmZlclZpZXciOjAsImJ5dGVPZmZzZXQiOjAsImNvbXBvbmVudFR5cGUiOjUxMjYsImNvdW50Ijo4LCJ0eXBlIjoiVkVDMyIsIm1heCI6WzI0NzUuMCwtNTkuMTI1LDI4NDAuMF0sIm1pbiI6WzU5LjEyNSwtNzUuMCwwLjBdfSx7ImJ1ZmZlclZpZXciOjEsImJ5dGVPZmZzZXQiOjAsImNvbXBvbmVudFR5cGUiOjUxMjUsImNvdW50IjozNiwidHlwZSI6IlNDQUxBUiIsIm1heCI6WzcuMF0sIm1pbiI6WzAuMF19XSwiYnVmZmVycyI6W3siYnl0ZUxlbmd0aCI6MjQwfV0sImJ1ZmZlclZpZXdzIjpbeyJidWZmZXIiOjAsImJ5dGVPZmZzZXQiOjAsImJ5dGVMZW5ndGgiOjk2LCJ0YXJnZXQiOjM0OTYyfSx7ImJ1ZmZlciI6MCwiYnl0ZU9mZnNldCI6OTYsImJ5dGVMZW5ndGgiOjE0NCwidGFyZ2V0IjozNDk2M31dLCJtYXRlcmlhbHMiOlt7Im5hbWUiOiJJZmNTdXJmYWNlU3R5bGVfVW5uYW1lZCIsInBick1ldGFsbGljUm91Z2huZXNzIjp7ImJhc2VDb2xvckZhY3RvciI6WzAuNzA1ODgyMDEyODQ0MDg1NywwLjc1Mjk0MTAxMjM4MjUwNzMsMC43NTI5NDEwMTIzODI1MDczLDEuMF0sIm1ldGFsbGljRmFjdG9yIjowLjB9fV0sIm1lc2hlcyI6W3sicHJpbWl0aXZlcyI6W3sibW9kZSI6NCwibWF0ZXJpYWwiOjAsImluZGljZXMiOjEsImF0dHJpYnV0ZXMiOnsiUE9TSVRJT04iOjB9fV19XSwibm9kZXMiOlt7Im5hbWUiOiJJZmNXYWxsX1VubmFtZWRfMDAwMDAwMDAwMDAwMDAwMDAwMDAwMCIsIm1hdHJpeCI6WzAuMDAxMDAwMDAwMDQ3NDk3NDUxNCwwLjAsMC4wLDAuMCwwLjAsLTQuMzcxMTM4ODY3NTMxNTk5ZS0xMSwtMC4wMDEwMDAwMDAwNDc0OTc0NTE0LDAuMCwwLjAsMC4wMDEwMDAwMDAwNDc0OTc0NTE0LC00LjM3MTEzODg2NzUzMTU5OWUtMTEsMC4wLDAuMCwwLjAsMC4wLDEuMF0sIm1lc2giOjB9XSwic2NlbmVzIjpbeyJub2RlcyI6WzBdfV0sInNjZW5lIjowffAAAABCSU4AAIBsQgCAbMIAAAAAAACWQgAAlsIAAAAAAACWQgAAlsIAgDFFAIBsQgCAbMIAgDFFALAaRQAAlsIAAAAAALAaRQAAlsIAgDFFALAaRQCAbMIAAAAAALAaRQCAbMIAgDFFAAAAAAEAAAACAAAAAAAAAAIAAAADAAAAAQAAAAQAAAAFAAAAAQAAAAUAAAACAAAABAAAAAYAAAAHAAAABAAAAAcAAAAFAAAABgAAAAAAAAADAAAABgAAAAMAAAAHAAAABgAAAAQAAAABAAAABgAAAAEAAAAAAAAAAwAAAAIAAAAFAAAAAwAAAAUAAAAHAAAA
This base64 String loads in our non React Solution and also on the playground examples you guys provided us with. Now in our React Solution we get following error:
We implemented babylonjs into react like this: How to use Babylon.js with ReactJS - Babylon.js Documentation
I think it could be something with the version of the loader or imports…
Here is what we import:
import React from 'react';
import { Scene, ArcRotateCamera, Color3, Engine, SceneLoader, AssetContainer, Vector3,
HemisphericLight, SceneOptimizerOptions, SceneOptimizer } from '@babylonjs/core';
import { AdvancedDynamicTexture } from '@babylonjs/gui';
import SceneComponent from '../SceneComponent'; // ^^ point to file we created above or
'babylonjs-hook' NPM.
import '../../App.css';
import { HOST, METADATA_URL, GEOMETRY_URL, postData, streamData } from "../api/dsbim.js";
import "@babylonjs/loaders";
import { addMenu } from './functions/menu.js';