nmalex / three.js-helpers

three.js helpers and useful classes
MIT License
16 stars 8 forks source link

mouse move group #2

Open wizarden opened 5 years ago

wizarden commented 5 years ago

group = new THREE.Object3D(); group.add( cube1,cube2 ); mouseMove.objects.push(group); //??? how to assign to a group scene.add( group );//it works

nmalex commented 5 years ago

Hi, thanks for rising this topic up, the code does not consider hierarchies. In your example group will be used as a target for raytracing. Group has no mesh to raytrace, it will be skipped.

Please see working example here: http://jsfiddle.net/mmalex/uqy1dzrt/

wizarden commented 5 years ago

ClipperLib??

nmalex commented 5 years ago

You can ignore clipper for this case, just see how RayysMouseMove and RayysMouse are initialized and connected to callbacks

wizarden commented 5 years ago

let points = shape.getPoints(3);??

nmalex commented 5 years ago

!!! https://threejs.org/docs/#api/en/extras/core/Curve.getPoints

NDrey3Dtech commented 5 years ago

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

NDrey3Dtech commented 5 years ago

We are trying to compose a group of objects that have parametric parameters. We can’t unite in groups. Like in this video

nmalex commented 5 years ago

Here's your how the hierarchy is created:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x009000} );
var cube0 = new THREE.Mesh( geometry, material );
var cube1 = new THREE.Mesh( geometry, material );
cube1.position.set(2,0,0)
var cube2 = new THREE.Mesh( geometry, material );
cube2.position.set(-2,0,0)
cube0.add( cube1,cube2 );
mouseMove.objects.push(cube0);
scene.add(cube0);

.recursive flag in https://threejs.org/docs/#api/en/core/Raycaster.intersectObject has to be set true, so that it would let raycaster pick by parent and all children too.

In mouse down even handler:

        this.pickPoint = intersects[0].point;
        let pickedObj = intersects[0].object
        if (this.objects.indexOf(pickedObj) !== -1) {
            this.pickedObj = pickedObj; // parent object was picked directly
        } else { // find out if picked object has manipulatable parent,
          let pickedParent = pickedObj.parent;
          while (pickedParent) {
            if (this.objects.indexOf(pickedParent) !== -1) {
                this.pickedObj = pickedParent; // set pickedObj to parent, if exists
              break;
            }
            pickedParent = pickedParent.parent;
          }
          if (!this.pickedObj) {
            return;
          }
        }
nmalex commented 5 years ago

Working example see here: http://jsfiddle.net/mmalex/bug5t8qe/

wizarden commented 5 years ago

cube0.add( cube1,cube2 );
thank make cube0 the size of the whole group and make invisible material

wizarden commented 5 years ago

image

NDrey3Dtech commented 5 years ago

I've tried to move around the axes, but I've come to a dead end. Could you push or tell me which direction to take?

https://github.com/NDrey3Dtech/RoomCad

nmalex commented 5 years ago

Hi, check if this might be helpful for you: http://mbnsay.com/rayys/containers/

On Wed, Sep 18, 2019 at 4:03 PM NDrey3Dtech notifications@github.com wrote:

I've tried to move around the axes, but I've come to a dead end. Could you push or tell me which direction to take?

https://github.com/NDrey3Dtech/RoomCad

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nmalex/three.js-helpers/issues/2?email_source=notifications&email_token=AEZWFSTHHNRXZCJCRYH7GXDQKIYJ5A5CNFSM4IQ4CAW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7AFPMY#issuecomment-532699059, or mute the thread https://github.com/notifications/unsubscribe-auth/AEZWFSS365VHC7UYSL7GO53QKIYJ5ANCNFSM4IQ4CAWQ .

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon Virus-free. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

NDrey3Dtech commented 5 years ago

I'm trying to do something like this xyz axis

https://youtu.be/ZfUcuWWKE0Q

nmalex commented 5 years ago

https://www.youtube.com/watch?v=6KTUaM5gkK4

On Wed, Sep 18, 2019 at 4:33 PM NDrey3Dtech notifications@github.com wrote:

I'm trying to do something like this

https://youtu.be/ZfUcuWWKE0Q

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nmalex/three.js-helpers/issues/2?email_source=notifications&email_token=AEZWFSVSHL7NNLEI3O232OLQKI32LA5CNFSM4IQ4CAW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7AIZ7Q#issuecomment-532712702, or mute the thread https://github.com/notifications/unsubscribe-auth/AEZWFSXDRHOGC2B7VTW635DQKI32LANCNFSM4IQ4CAWQ .

NDrey3Dtech commented 5 years ago

Yes, but here we choose between one or two axes. Is it possible to select on click axes as in this example.

https://threejs.org/examples/#webgl_geometry_spline_editor

NDrey3Dtech commented 5 years ago

Added to RayysMouseMove I now have a conditional move over XYZ but it works satisfactorily

if (mode === 'xyz') { this.translationLimits.set(1, 1, 1); this.translationPlane.normal.set(1,1,1); this.translationPlaneHelper.color = 0xffff00;

}