Hello again hoping you are doing good, if I have a threejs object (the result from parsing a .dxf file) and I want to render it with react three fiber how I can do it?, it renders fine not using the react three fiber library just with the normal threejs adding the object to the scene, but when I try with r3f I don’t how to add it to the scene, i tried with this example OBJLoader - CodeSandbox but no success, here an image of the object
There wouldn’t be any difference, either you use the same code you already have, inside useEffect and then <primitive object={scene} or useLoader, which would make it easier.
putting-already-existing-objects-into-the-scene-graph
Useloader
Hello!, sorry for the late reply I was busy with other things, thank you for your answer, I was trying to do this but the useLoader doesn’t work for me or at least that is what I think, my threejs object came from dxf parser this converted a dxf file to a threejs object that I can render with the normal threejs library just adding it to the scene doing this scene.add(dxf object), the problem here is that useLoader ask me a url string that I don’t have and I don’t find the way to render this object now,the application flow is that you ask for a dxf file, you pass the file to the parser and then it returns a threejs object that I pass to component scene where it will render.
this is the component where I receive the file and then parser do his thing
export default class App extends React.Component {
constructor(props: any){
super(props);
this.state = {
obj: null!
}
}
handleFile = async (event: ChangeEvent<HTMLInputElement>) => {
var file = event instanceof DragEvent ? event.dataTransfer!.files[0] : event.target.files![0];
const dxfViewer = new DXFViewer();
const dxf = await dxfViewer.getFromFile( file, font );
// var parser = new DxfParser();
// var dxf = parser.parseSync(fileReader.result);
this.setState({obj: dxf});
}
render() {
return (
<div role="main">
<Button variant='contained' color='primary'>
<input hidden accept=".dxf, .dwg, .obj, .stl" type="file" id="file" onChange={this.handleFile}/>
<label htmlFor="file">
Seleccionar Archivo
</label>
</Button>
{/* <SceneContainer></SceneContainer> */}
<Canvas camera={{zoom: 1}}>
<Suspense fallback={null}>
<Scene obj={this.state}/>
</Suspense>
</Canvas>
</div>
);
}
}
then in the scene I do this.
const Scene: FC<SceneProps> = ({obj}) => {
const { gl, scene, camera } = useThree();
// const ref = useRef<any>();
let box = new Box3().setFromObject( scene );
let center = box.min.add( box.max.sub( box.min ).divideScalar( 2 ) );
camera.position.set(center.x , center.y, 1000 / 10);
camera.updateProjectionMatrix();
gl.setSize(window.innerWidth, window.innerHeight);
scene.background = new Color(0x212830);
const controls = new OrbitControls(camera, gl.domElement);
useFrame(() => {
controls.zoomSpeed = 2;
controls.enableRotate = false;
controls.mouseButtons = {
LEFT: MOUSE.PAN,
MIDDLE: MOUSE.DOLLY,
RIGHT: MOUSE.PAN
};
return () => {
controls.dispose();
};
});
return (
<>
{/* <mesh ref={ref} >
<boxGeometry />
<meshStandardMaterial color="white"/>
</mesh> */}
{/* <primitive object={scene} position={[0,0,0]}></primitive> */}
</>
)
}
I tried adding the object={obj} and object={scene} but both of them gave error, trying with other predetermined mesh like box geometry works.
i see some pretty grave mistakes in how you use components in general. there cannot be anything inside the render function except hooks. but you’re executing functions in there, create new variables and objects. that can only result in failure.
and as i said, you put existing stuff into the canvas via <primitive object={…}, you don’t need scene.add.
if you like make a very reduced codesandbox that does nothing else but attempt to load your dxf. i’ll fix it up for you.
ok, here it is the link little-field-hw7th5 - CodeSandbox for some reason the dxf library is giving me error here.
that library is most likely broken, it seems to malform the module export.
use another library, for instance three-dxf-loader seems OK. gallant-field-xftwzl - CodeSandbox
ps, i transformed the example into a suspending component since it’s an async action, now it will behave like useLoader and you can use all of the eco system to center, zoom to fit, etc.
Thank you!!