Changing position of ViewHelper

Questions
1

Hi, I tried to implement the view helper in my code. I followed the Interactive View Helper -JS fiddle reference. My problem is, I couldn’t change position of the view helper. Also, In my TS file, helper.controls = controls line show error as ‘’ Property ‘controls’ does not exist on type ‘ViewHelper’ ".

2

Apparently the types declaration for this particular helper is not updated, in this case using ts-ignore is fine:

//@ts-ignore
viewHelper.controls = controls

You’ll need to properly setup your helper:

// helper
    helper = new ViewHelper( camera, renderer.domElement );
    helper.controls = controls;
    helper.controls.center = controls.target;
    
    const div = document.createElement( 'div' );
    div.id = 'viewHelper';
    div.style.position = 'absolute';
    div.style.right = 0;
    div.style.bottom = 0;
    div.style.height = '128px';
    div.style.width = '128px';
    
    document.body.appendChild( div );
    
    div.addEventListener( 'pointerup', (event) => helper.handleClick( event ) );

Where controls is the OrbitControls, and div is the DOM element dispatching the pointer events to the viewHelper.

3

@Fennec I did the same, It shows in right bottom corner of the window. I need the view Helper to be shown in left bottom corner. Where should I update the position?

4

Nothing fancy just CSS

5

The div has no direct connection to the ViewHelper, It just creates a box around view helper to handle the handleclick function. If I change the div styling, div.style.left = 0. The div position changes, but the viewHelper still in same position.

6

My bad, turns out it is fancy :sweat_smile:

I made this codeSandbox a while back, try the ViewHelper class in ViewHelper.js, import and set it as follow:

  const viewHelper = new ViewHelper(camera, renderer, "bottom-left", 128);

You don’t need to set a div or anything, it does it internally, it also works with or without OrbitControls or TrackballControls, if you’re using one of them in your scene, set it as follow:

viewHelper.setControls(controls);

And here you can find the typescript version of the VeiwHelper class

7

It works. Thanks for your help :+1:

1 Like
8

Hi I saw your Viewhelper.js in sandbox too. I tried to use it but I find some problems and I ask you how I can solve it for you.

  1. if you notice compared to your Gizmo my X,Y,Z dots have some light pixels around them also the gizmo is not very sharp compared to yours

1

  1. if I use a perspective camera (with an active grid and a plane placed just under the grislia to render the projected shadows) the gizmo always remains in the foreground, while if I use an orthographic camera the gizmo disappears behind the grid or the plane.

2
21422×784 45.4 KB

3
31218×744 32.8 KB

Can you help me solve the problem?

Thank you