build 3D editor with r3f and typescript

Job ID: 34107697

Budget: $1,999 – $20,000 USD

I’m hiring a developer to build an Online Isometric 3D ditor for the network topology templates, I already have 20+ network topology templates and I want to make it possible for clients to edit all of these templates inside the browser.

After doing some technical research, I know the technologies that need to be mastered to complete this project

Our company is trying to copy the functionality, I with the app is built on open-source code, ThreeJS and React as well as webGL filters for warping and perspective effects on mockup items and images.

We can agree on an hourly rate or an overall budget for the whole project, as well as a monthly salary for maintenance once the project is done.

The whole project will be divided into several milestones.
Detailed view of the milestone description of the 8 chapters.

In the end, we hope to support two perspectives, perspective perspective and orthogonal perspective.

In the first phase, we only need to realize the orthogonal perspective view,

but for the first milestone,
we hope to only realize the most basic creation of a component.

On the canvas, this component can implement drag and drop, and then multiple components can be connected by lines, and the material of the component can be replaced by the file definition in json format or xml format.

We have done detailed technical research on this project. We think that the react -three-fiber are more suitable for this project, I need you to use this lib for the first milestone

The entire project delivery needs to be done through github


The entire project delivery needs to be done through github


main gui、web3d canvas、ground grid、object drag move、snap to grid、group selection、group move、vertical move lock,orbits control,object connection,object labels(including object name at top of object, with arrow、line icons at right-top-front corner of object)

Refer to the code that has been submitted on github


https://github.com/flashoop/javascript-three-editor




1. The connection and connection between the 2 objects are disconnected 2. Line dragging and turning points (support pressing the ALT key to snap to the grid) 3. Camera mode switching. The basic functions in the prototype requirements document should be implemented.


Achieve 5.5.2.1 component interaction and 5.5.2.4 Edges (Line/arrow) line point editing

we hope to only realize the most basic creation of a component.

On the canvas, this component can implement drag and drop, and then multiple components can be connected by lines, and the material of the component can be replaced by the file definition in json format or xml format.

This project needs to be done with React-three-fiber and typescript
Related categories: React.js Typescript Three.js