Fixing a 2-D geometry shape in space

Questions
,
1

Hi, I am completely new to three.js . I am trying to render 2-D geometry shapes on my WebGL window (rectangle, triangle and circles) such that when i zoom out, the shape becomes smaller and vice versa (bigger when I zoom in) with the mouse wheel.
I also need the camera to be fixed in for this object to be on the graphics window so that any background objects cannot be moved (only zooming is allowed) I want the shape to be rendered at exactly the centre of the webgl graphics window. Any suggestions on how I can do this?

2

Using ShapeBufferGeometry and a perspective camera seems the right approach. Especially if you want to generate the 2D shapes in your application.

How about using OrbitControls and disable orbiting and panning?

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.enableRotate = false;

Demo: Edit fiddle - JSFiddle - Code Playground

3

Thanks @Mugen87! I will give this a try and let you know what happens.

4

Hey @Mugen87. I tried your solution and one thing I realized is that I don’t want to change the camera position. I want the geometry to be rendered at the current camera position but right in front of it (no matter where the camera is positioned in the 3-D space) . Any way to do this?

Thanks for the ShapeBuffer suggestion. It works!

5

I have a link to a better description of my problem I have posted as another question: