Aframe: Support OrthographicCamera?

[lslzl3000]

Description:
Can we use a OrthographicCamera in Aframe?
I do really need a Orthographic view instead of Perspective view, but Aframe always uses PerspectiveCamera, can we add options in [camera]?

I tried to write a custom camera Component by replacing 'PerspectiveCamera' in 'src/components/camera.js', but it will show errors (e.g. this.system undefined ...)

Hope someone could give some help.

• A-Frame Version: <= 0.6.1

[dmarcos]

A-Frame is focused on VR use cases and an OrtographicCamera does not make sense on a stereo / vr context. Can you share what is your use case exactly?

[donmccurdy]

FWIW you can do this with a little hackery:

AFRAME.registerComponent('ortho', {
  init: function () {
    var sceneEl = this.el.sceneEl;
    sceneEl.addEventListener('render-target-loaded', () => {
      this.originalCamera = sceneEl.camera;
      this.cameraParent = sceneEl.camera.parent;
      this.orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1);
      this.cameraParent.add(this.orthoCamera);
      sceneEl.camera = this.orthoCamera;
    });
  },
  remove: function () {
    this.cameraParent.remove(this.orthoCamera);
    sceneEl.camera = this.originalCamera;
  }
});

<a-scene ortho>
  <!-- ... -->
</a-scene>

But as @dmarcos says, A-Frame is not meant to be a general 3D library (as three.js is), it is focused on VR (and/or AR,XR,MR...), so ortho is probably not a case we can guarantee support or documentation for.

[lslzl3000]

@donmccurdy Thanks, I know how to do a OrthographicCamera now. But I find out other components (e.g. cursor, look-controls) didn't work well with OrthographicCamera. It may need to hack many other components.
@dmarcos I'm doing a data visualization project, it was working with general 2D lib like d3.js, we're trying to re-create all lines in a 3D world. It works well with three.js, and much easier with A-Frame, but we don't like or need the perspective effect.

[ngokevin]

Yeah, you'll need to write your own controls components possibly to work with ortho and manually replace the camera as Don suggested.

[promontis]

@ngokevin sorry to hijack this old post, but I'm currently building a VR 'editor' and I do agree with that A-Frame should mainly focus on the Perspective Camera, but I do need to switch between PerspectiveCamera (when viewing what the user has build) and OrthographicCamera (when the user is designing). I'm unsure yet on how to make it work (the sample posted above, doesn't really work), but would you accept a PR if I were to build support for it?

[dmarcos]

@promontis An orthographic camera and all its implications would be very hard to maintain. You can always build your own component as suggested above that you can ship with your editor. Is that an option for you?

[Jesusbill]

@promontis I am also trying to implement an orthographic camera but currently struggling with controls. Have you found any useful resources by any chance?
thanks in advance

[promontis]

@Jesusbill nope... sorry. I've switched over to BabylonJS as it provides much more out-of-the-box in the areas that I needed, namely a 3D editor. Will use AFrame more for real VR

[erikwoods]

I think I have a use case for an orthographic camera. I will attempt to describe it here:

• A developer wants only to make use of 3D graphics in the browser - they plan to disable vr-mode-ui for the scene.
• A developer wants to use A-Frame because its abstraction from threeJS makes it easier for them to understand. They don't want to fiddle with code too much.

This does not accurately describe me, but it's not hard for me to imagine being in this position.

Came here looking for way to set up an orthographic camera. I think I found it what I needed, but so many others I know wouldn't be comfortable doing it. The more creative-types who don't program.

[nmorse]

Strange that the a-frame home page animation is an orthographic projection or maybe its camera is very far from the subject, making it close to a parallel projection -- false advertising

[ngokevin]

Just make a component that adds an orthographic camera.

[edsilv]

I have something similar to @erikwoods use case. We're using A-Frame because it provides a useful abstraction over three.js for building our reactive toolset. (We're rendering A-Frame tags in JSX and using Redux). This is proving to be a very good developer experience (our first version was all custom three.js and difficult to debug).
We really like the fact that A-Frame supports immersive use cases and the door is open to that, but we have a requirement for an orthographic view too. @ngokevin is it simply a case of switching out the cameras at runtime? It would be great to have an unsupported example of the best way to achieve this.

[yyvus]

Hi, I am in the same situation than @edsilv. You can see here the current state of the work that has been done for now. I have two use cases:

1. The designer of the craft you can see in the demo
2. The seller that will ask me to make the craft visualization a VR exeprience.

But phase 1. is prioritized at the moment. For the moment I play with the FOV parameter of the camera entity.