Basically I’m rendering a ThreeJS scene in react..
The component waits for a user to upload a file, to then parse the file and create a scene.
This is the render:
return (
<Container>
Input NBT file <br/>
<input type="file" onChange={handleChange}></input>
{renderHandler()}
</Container>
)
Component declaration, state declaration, and a static array I have named blockState
const Upload = () => {
const [scene , setScene] = React.useState([]);
// handleUpload = (event) => {
// console.log('Success!');
// }
let blockState = [<TexturePlane x={0} y={6} z={0} rot={[-Math.PI / 2, 0, 0]}/>];
function renderHandler(){
console.log('[RENDER] calling...')
if(scene.length == 0){
console.log('[RENDER] Denied!')
return(
<div>
Nothing is rendered..
</div>
)
} else {
return (
<View top={[...blockState]}/> //This works
// <View top={[...scene]} /> //This doesn't work
)
}
}
handleChange:
function handleChange(event) {
console.log(event.target.files);
// console.log(event.target.files[0]); //file struc
const file = event.target.files[0];
var reader = new FileReader();
reader.onload = (e) => {
var x = nbt.parse(e.target.result, function(error, data) {
if (error) { throw error; }
parseNBT(data);
});
}
reader.readAsArrayBuffer(file);
}
Basically handleChange readers the file, decodes, and the parseNBT(data) callback is called.
function parseNBT(input) {
console.log('Parsing...');
//Does stuff
setScene(scene.push(<TexturePlane x={3} y={3} z={0} rot={[-Math.PI / 2, 0, 0]}/>));
}
The issue i’m having here is that when I’m trying to render the View Component (in renderHandler) passing in the scene state, it throws this error:
Whereas, when I use blockState, it renders just fine: (Works with & without spread syntax)
I’ve console.log’d blockState & scene, they are indentical objects, it’s weird how when I’m passing in scene it isn’t working;
Source of the problem: (the renderHandler calling View component)
function renderHandler(){
console.log('[RENDER] calling...')
if(scene.length == 0){
console.log('[RENDER] Denied!')
return(
<div>
Nothing is rendered..
</div>
)
} else {
return (
<View top={scene}/>
)
}
}
View Component:
import React, { Suspense } from 'react'
import Input from 'react-bootstrap/InputGroup'
import { Canvas } from "@react-three/fiber";
import { OrbitControls, softShadows } from "@react-three/drei";
import {Container} from "react-bootstrap";
import Box from './Box';
import TexturePlane from './TexturePlane';
import DisplayPlane from './DisplayPlane';
softShadows()
const View = (props) => {
let top = props.top;
return (
<Container>
<Canvas shadows style={{ position: "relative", width: 750, height: 750 }} gl={{ antialias: false }}>
<ambientLight intensity={0.9} />
<directionalLight
castShadow
position={[9, 9, 9]}
intensity={1.9}
shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
shadow-camera-far={100}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
/>
<OrbitControls enableZoom = {true} />
<Suspense fallback={null}>
{/*Generate scene here: */}
{/*bottom: */}
{top}
{/* top */}
<DisplayPlane/>
</Suspense>
</Canvas>
</Container>
);}
export default View
And TexturePlane is just a plane render component
