# Import cad 3d data and render in react js (HMI)

**URL:** <https://forum.inductiveautomation.com/t/import-cad-3d-data-and-render-in-react-js-hmi/80582>\
**Category:** Ignition\
**Created:** [October 17, 2023, 9:34am UTC](https://forum.inductiveautomation.com/t/import-cad-3d-data-and-render-in-react-js-hmi/80582 "2023-10-17T09:34:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bremlis66](https://avatars.discourse-cdn.com/v4/letter/b/85e7bf/32.png) [@bremlis66](https://forum.inductiveautomation.com/u/bremlis66)\
**Post date:** [October 17, 2023, 9:34am UTC](https://forum.inductiveautomation.com/t/import-cad-3d-data-and-render-in-react-js-hmi/80582/1 "2023-10-17T09:34:05Z")

</div>

Hi,

I would like to import a machine plant as a 3d cad model into react.js and visualize the plant in the HMI. It should be possible to click on different parts of the plant and display them in 3D in single view. How exactly does this work? I know that I need three.js to display the model (step file) in react but what functions are behind that in the code? Are they rather complex functions or can you just go ahead with it?

To add, I am still a beginner in react.js.

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 17, 2023, 12:13pm UTC](https://forum.inductiveautomation.com/t/import-cad-3d-data-and-render-in-react-js-hmi/80582/2 "2023-10-17T12:13:55Z")

</div>

You will need to create a component with Ignition's SDK, I think. You cannot just use any arbitrary javascript in Perspective.