Draggable cube stops working if zoom out too much

[NicolasRannou]

Description of the problem

If we zoom out too much in the draggable cube example, at some point dragging stops working because the plane we use as a reference for dragging is "too small".

Can we make this "invisible" plane always cover the THREEJS renderer so its size doesn't matter and we can zoom out as much as we want?

I am not sure which would be the best way to implement such a feature for perspective and orthographic camera.

Three.js version

• [x ] Dev
• [x ] r76
• [x ] all

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• Linux
• Android
• IOS

Hardware Requirements (graphics card, VR Device, ...)

[NicolasRannou]

It seems adding the plane as a child of the camera would be a first step:

camera.add( plane );
object.position.set( 0, 0, - 100 ); // or whatever distance you want

(http://stackoverflow.com/questions/31831425/static-object-in-scene-three-js)

Then setting the right dimension/position for the plane depending on the camera type would be the next step.

[makc]

why there shuld even be a plane, if it's invisible? better just replace it with the math

[NicolasRannou]

yes definitely, but was just wondering if there was a quick fix for it.

I'll implement that hopefully this week and get back here, should be pretty straight forward.

[NicolasRannou]

@makc what do you think about that?
#8733

[makc]

@NicolasRannou idk, does it really work as intended?

https://rawgit.com/NicolasRannou/three.js/draggableCubes/examples/webgl_interactive_draggablecubes.html

seems to work for me, when zoomed out all the way to camera far clipping plane.

but,

• if I drag from the center to the bottom, the cube remains visible;
• if I drag from the center to the left, and then from there to the bottom, the cube gets clipped.

is this plane not orthogonal to the camera?

[mrdoob]

It seems adding the plane as a child of the camera would be a first step:

That's a nice and simple solution! 😀

[NicolasRannou]

Hi guys, I updated the code so it behaves exactly as the original version:
#8733

@makc : yes the plane was not properly computed.
@mrdoob : doesn't it sound better to get rid of the plane geometry as in the pull request?

As a side note, I do not understand what are currentHex, getHex, etc. colors used for.
Did it use to work? The live version of the example doesn't. [2]

Is it supposed to change the color of the cube somehow? As far as I can remember it seems so but I can not see how the could would work in its current state. [1]

...
  if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

  ...
  INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
...
etc.

[1] - https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_draggablecubes.html
[2] - http://threejs.org/examples/#webgl_interactive_draggablecubes

[makc]

@NicolasRannou
not sure what did you change, but I still see that behavior I told you about: https://www.youtube.com/watch?v=nKOnVZlW7z8

[NicolasRannou]

I changed the way the plane is created:

plane.origin.copy(INTERSECTED.position);
plane.direction.copy(camera.position).sub(INTERSECTED.position);

Can you make the video public please?

[NicolasRannou]

Clipping and disappearing cubes could be linked to the camera front/far planes

[makc]

sorry, my mistake. should be available now

[NicolasRannou]

Thx - checkout out this one, it is because of the camera front/back planes, so I do not think it is a problem:

https://www.youtube.com/watch?v=5lE7HDPJfDY&feature=youtu.be

[makc]

it looks like it goes behind far plane to me.

[makc]

but I would think the cube must always move parallel to that plane, so why would it ever cross it?