attempting to implement orthographic camera

[sirrodgepodge]

Hello there!

Attempting to implement orthographic camera (for the purpose of 2D Usage of 3d-force graph for performance benefits) using this SO post: https://stackoverflow.com/questions/48758959/what-is-required-to-convert-threejs-perspective-camera-to-orthographic

I actually was unable to get a test environment working for this (with the different packages working together for some reason NPM link didn't work), I figure you likely have one readily available to take a quick look.

[RaulPROP]

To test it locally, i did the following:

1. Clone 3d-force-graph and your fork in the same folder.
2. Modify the package.json of 3d-force-graph. Change the three-render-objects dependency to file:<relative-route> (probably file:../three-render-objects).
3. Run npm i in your fork.
4. Modify your fork as much as you want.
5. Run npm run build in your fork folder whenever you want to test changes.
6. Run npm i in 3d-force-graph, then open one file of the example folder (i usually pick basic) and change the import to the one that is local (<script src="../../dist/3d-force-graph.js"></script>).
7. Open that file in the browser.

And that's it.

Now, when you want to test some changes you need to run npm run build on the fork and npm i on the 3d-force-graph.

PS: In order for your fork to work, you also need to add cameraType to the stateInit in 3d-force-graph/src/3d-force-graph.js.

[sirrodgepodge]

got it, thank you, I figured there had to be something upstream I was missing...

btw you can use npm link in order to avoid needing to modify package.jsons, it overrides a dependency with a local symlink

1. in the local forked and modified dependency run npm link, this builds and exposes this local code to be symlinked elsewhere.
2. in your consuming repo npm link <dependency name>, in this case npm link three-render-objects

Here I think why I failed is because as you pointed out I also need to modify the intermediate dependency of 3d-force-graph.

[vasturiano]

Interesting, thanks for the PR @sirrodgepodge! 👍

I left a few minor comments. We should be able to merge this after cleaning up the code a bit.

Would you mind adding something to the docs also?

[sirrodgepodge]

Responded to all the comments.

Have to be honest and say that I still couldn't get a test environment working :( :( :(. Maybe you have and can confirm it works.

I need to link three-forcegraph and 3d-force-graph to get react-force-graph-3d to be using this right?

[vasturiano]

@sirrodgepodge for testing this functionality you can run yarn build or yarn dev which will save the built files in the local /dist directory. Then you can simply import those into your development example. If you want to try with the built-in example, you just have to modify the script tag target here: https://github.com/vasturiano/three-render-objects/blob/master/example/basic/index.html#L7

[sirrodgepodge]

whoops, that was super sloppy, apologies, attempted to clean up here: https://github.com/vasturiano/three-render-objects/pull/6/commits/38305ff5fc8aff0dba3600a635a032a8049e09ee

The only thing I'm unclear on is whether state.camera.position.z maps exactly to depth described here: https://stackoverflow.com/questions/48758959/what-is-required-to-convert-threejs-perspective-camera-to-orthographic

Will give up on fancy npm link and just try getting local orchestration happening through direct imports this weekend.