Rotating PlaneGeometry at edge like a door. using dat.gui?

I’m using the basic planes / dat.gui setup from the clipping planes stencil example.

I’m trying to have the plane rotate around it’s y axis (up) liek a swinging door with the “hinge” at the 0,0,0, with no gimbal lock, controlled by dat.gui.

having serious problems getting it to work. it should only rotate from 0 to 180 deg… but rotations in three.js are just so mind bogglingly difficult to do i don’t understand how anyone gets it to perform properly…

I have var planeSize, planes, planeObjects, planeHelpers, object;

		// Planes Setup
		var planeXvector3, planeYvector3, planeZvector3;
        planes = [
            planeMeshX = new THREE.Plane(planeXvector3 = new THREE.Vector3(-1, 0, 3), 0), // x
            
            planeMeshY = new THREE.Plane(planeYvector3 = new THREE.Vector3(0, - 1, 0), 10), // y

			planeMeshZ = new THREE.Plane(planeZvector3 = new THREE.Vector3(-3, 0, - 1), 0)  // z
        ];


	var params = {

        gui:    {
            visible: true,
        },
        

		planeX: {

            constant: 0,
			negated: false,
			displayHelper: false
		},
        
        
		planeY: {

			constant: 0,
			negated: false,
			displayHelper: false
		},
        
        
		planeZ: {

			constant: 0,
			negated: false,
			displayHelper: false
		}
	};

var folderTitle = mesh.name + ' planeX';
var planeX = gui.addFolder(folderTitle);
planeX.name = folderTitle;
console.log('planeX.name: ',planeX.name);

var minZ = THREE.Math.degToRad(-180);
var maxZ = THREE.Math.degToRad(0);
planeX.add(planeXvector3,'x',minX,maxX,1);


planeObjects = [];
    var planeGeom = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    var planeGeomName = (mesh.name + '_planeGeom');
    planeGeom.name = planeGeomName;
    console.log('planeGeom.name: ',planeGeom.name);
    var planeGeomVar = app.scene.getObjectByName(planeGeom.name);
    console.log('planeGeomVar: ',planeGeomVar);

As The Great 孙悟空 once said - “it is a great step towards understanding, when you admit to yourself that it’s not three.js API that’s to blame, but your own lack of patience.”

𝟏. Three.Plane is not Three.PlaneGeometry.
2. You don’t need Three.Plane at all, if all you want is to rotate a plane mesh :’)
𝟰. You didn’t explain what the issue is or what did you try - neither did you show how you rotate the doors (or I’m blind, which I occasionally am, sorry.)
5. You didn’t notice there’s no point 3.
6. Here’s a complete fiddle for you - I hope it helps. :’)

2 Likes

Terribly sorry about the state of this post.
I had worked myself to exhaustion stumped for hours and thought I’d ask before taking a good rest.
I will attempt to clarify.
Thank you for the fiddle.

another night of fruitless endeavors…
i’ve found to rotate objects using dat.gui fine.
that’s not the problem.
the problem is taking the math.plane for the clipping planes i’m using, and have them parented into an object or group so that there is a container object3d that i can offset the plane within, and thus have it’s rotation origin be at 0,0,0, .
i’m having no luck with this.
i’ve used Matrix4 and Vector3…
ie:
planeMeshX = new THREE.Plane(planeXvector3 = new THREE.Vector3(-1, 0, 0), 0)

and
`var planeX_Parent = new THREE.Group();
planeMeshX.applyMatrix4( new THREE.Matrix4().makeTranslation( 0, 25, 0 ) );

    planeX_Parent.add(planeXvector3);

    app.scene.add(planeX_Parent);`

just trying to get the math.Plane into an actual object with parameters lik axes etc…

forgive me if my unlearnedness with much of this material is prevalent.
trying… thnx.
(also i’m using the tilda key’s tick to bracket my code… i’ts not working… is there a proper way? thnx.)

In the tab above post input you can just click the button with </> on it - tripple tilde-apostrophe should work tho :man_shrugging: (just found out it’s called a grave accent :skull: )

As for your code - can you make a fiddle showing entirely what you’re trying to achieve with these vectors and matrices (can be with the code that’s currently not working) ? Sounds like some crazy over the top math and it would be much easier to help you if we’d have some code to play with.

lol “accent grave” (grah-ve) francois

thanks… yeah i mean hell my code is so messy right now experimenting with so many solutions yet the working code i find is so simple…
im just using the clipping planes stencil code (very augmented)…
and trying to encapsulate the math.plane’s into a matrix so that i may modulate their rotation…FROM an offsetted center…ie: the “door hinge” method you linked to earlier… which works GREAT… but not unless the math.plane is in a matrix… so i’ve read that the best way is to use “vector4.”

i’ll try to illustrate this with code in a next post.
… but i think my concept has been made clear (unless i’m a complete idiot)
thnx

Alright, so if I finally got you correctly - you trying to a rotate a Plane (same as in the stencil example, which isnot a PlaneGeometry), around a specific origin point, by a certain number of degrees/radians :exploding_head: ?

2 Likes

yes exactly, sir.

I am trying to make a pie-chart style reveal of the geometry.

everything is in order, except the proper quaternion /deg/rad conversions etc…(have a good find here for reference for that though) and having the math(not geometry) plane (responsible for the clipping ) be rotated around the world center 0,0,0, via a dat.gui slider.

(this would be actually TWO planes rotating in opposite directions from 0 to 180/-180 each. as to perform a symmetrical reveal)

(also been reading up on “How To work with planes” …just trouble merging it with dat.gui i guess.

but yes, you understand me correctly, and those are the extra details.

thank you very much for your attention to the matter! :slight_smile:

Hello,

Did you found a sollution? I’m struggling with the same issue, and i cannot get it to work.
I have models which are not at position [0,0,0] but rather something like [565450, 0, -6659950]
(They are positioned on a world map)

I need the objects to be cut, at any angle. So a Math.Plane which the user can rotate at the objects local position.

I can set the Plane at the objects position… but the rotation is something i cannot get to work
(The Plane always rotates around 0,0,0 )

Thanks!

Oh boy!

Figured it out, i don’t know if it’s a good way of doing it… but this post gave me the solution!

  1. position a mesh ( with PlaneGeomtrey ) a the location i want, after rotation and moving to it’s position.
  2. Next you can access it’s BoundingBox and get 3 corner points from it.
    2.1. ( Don’t forget to convert from localToWorld )
  3. then it’s as simple as plane.setFromCoplanarPoints() !!
///target == the rotated/positioned mesh with PlaneGeometry
target.updateMatrixWorld(true);
target.geometry.computeBoundingBox();
if (target.geometry.boundingBox) {
    const { min: topLeft, max: bottomRight } = target.geometry.boundingBox.clone();
    const bottomLeft = new Vector3(topLeft.x, bottomRight.y, topLeft.z);
    target.localToWorld(topLeft);
    target.localToWorld(bottomLeft);
    target.localToWorld(bottomRight);

    cuttingPlane.setFromCoplanarPoints(topLeft, bottomRight, bottomLeft);
}

I hope this saves someone a lot of time! and if this can be achieved with a better method, i’m all ears :wink:

2 Likes

Hi,
Interesting solution!
Could you possibly share an example in codepen.io for example?

I’d love to see it in action!
Thanks!

One way of many.
Rot.html (3.7 KB)

Thats not a sollution! Try doing that with a Plane
You can visualize it with PlaneHelper

And the plane should not be at position 0,0,0 !

I will! Give me some time to strip it to the bare necessities :slight_smile:
i use it in combination with react-three/fiber

1 Like

Unless I missed something Rot.html does what OP asked for in the most efficient and easiest way. There is a plane rotating aroud Y axis. And you do not need PlaneHelper to visualize it.

In this video, you see all scenario logic at work.


This video was captured using MediaRecorder pure vanilla JavaScipt

Hi,
I’m not sure what the cone is used for.
Is there any way to have the plane chop out the cone?