ThreeJs Create Object / Mesh On Click

Question

I'm using ThreeJS, how can you create an object / mesh on mouse click. Currently the object is not created on the exact mouse x and y position.

    var ge = new THREE.BoxBufferGeometry( 2, 2, 2 );
      ge.scale(2, 2, 2);
      var my = new THREE.MeshBasicMaterial( { 
      map: new THREE.TextureLoader().load( 'crate.gif' )
    } );
    ms = new THREE.Mesh( ge, my );

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    ms.position.x=raycaster.ray.direction.x; 
    ms.position.y=raycaster.ray.direction.y; 
    ms.position.z=raycaster.ray.direction.z;
    scene.add( ms );

Tim.G. · Accepted Answer · 2016-04-28 06:32:12Z

1

I had the same problem. The value raycaster.ray.position.(x|y|z) is always between -1 and 1.

After some testing i got, what i think, is what you want. One direction has to be defined. You actually need to create a Plane Object (not a mesh).

Here's how it works:

var vec = raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1, 0)));

What you need to do here is get the rayintersection on a defined plane. The Plane is infinitely big and invisible. You also need to tell the plane in which direction it should point. In this case it's (x=0,y=1,z=0) which basically means it just lays there and points upward.

And then it should work with:

ms.position.x=vec.x; 
ms.position.y=vec.y; 
ms.position.z=vec.z;

On click, this is the result: (the red boxes are added on click) boxes on Click

edited Apr 28, 2016 at 6:32

answered Apr 27, 2016 at 20:01

Tim.G.

3094 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joey Abano Over a year ago

Thanks. This one really helped.

Collectives™ on Stack Overflow

ThreeJs Create Object / Mesh On Click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related