The error message for obtaining the texture in the project created by create-react-app is as follows:
my code:
import { Engine, Scene, SceneLoader, TextureTools } from '@babylonjs/core';
import { useEffect, useRef, useState } from 'react';
import './App.css'
import '@babylonjs/loaders'
import AppCamera from './appCamera';
let engine: null | Engine = new Engine(document.getElementById("renderCanvas") as HTMLCanvasElement, true);;
let scene: null | Scene = null;
scene = new Scene(engine);
let camera = new AppCamera();
engine.runRenderLoop(() => {
scene?.render();
});
function App() {
const canvas = useRef<any>(null);
const [file, setFile] = useState<null | File>(null);
const onDrop = async(fileObjs: FileList | null) => {
if (!fileObjs || fileObjs.length < 1) return;
const fileObj = fileObjs[0];
setFile(fileObj);
// @ts-ignore
const texture: BaseTexture = scene?.textures[0];
const size = texture.getSize();
const data = await TextureTools.GetTextureDataAsync(texture, size.width, size.height, 0, 0);
return false;
};
return (
<div className="App">
{!file && (
<div className="next-upload-drag">
<p className="next-upload-drag-text">
drup file
</p>
<p className="next-upload-drag-hint"> gltf, glb, obj, .babylon</p>
<input type="file" onChange={(e) => onDrop(e.target.files)} />
</div>
)}
<div className="canvas-render"><canvas id="renderCanvas" ref={canvas}></canvas></div>
</div>
