Incorrect positioning of mouse while creation of the object

Questions
1

Hi,

I have a requirement where i enter the dimensions and a box is created when i click the inner orange ground.the box gets created at click but the position of the box is not correct

image
image1350×612 21 KB

the below image is a newly created one but the box is created away from where i clicked
image
image1366×625 24.8 KB

the following is the peice of code which i’m tuning

function setUpMouseHander(element, mouseDownFunc, mouseDragFunc, mouseUpFunc) {
  
//alert('setUpMouseHander');
  var dragging = false;
  var startX, startY;
  var prevX, prevY;



  function doMouseDown(evt) {
//alert('setUpMouseHander + doMouseDown');
        if (dragging) {
            return;
        }
        //var r = element.getBoundingClientRect();
        //var x = evt.clientX - r.left;
       // var y = evt.clientY - r.top;
       var x = evt.clientX ;
       var y = evt.clientY ;
        
        prevX = startX = x;
        prevY = startY = y;
        dragging = mouseDownFunc(x, y, evt);
    
  }

    controls.enabled = true;
  element.addEventListener("mousedown", doMouseDown);
}


  function doMouseDown(x,y) {
    
    
       raycaster.setFromCamera(mouse, camera); 
    // console.log('new' + tooltipEnabledObjects[0]);
        var intersects = raycaster.intersectObjects(dynamicObj);
         latestMouseProjection1 = intersects[0].point;
       
        if (intersects.length > 0) {
       
             var item = intersects[0];
       // alert('item' + item);
    var objectHit = item.object;
    var objectHitname = item.object.name;
      controls.enabled = false;

        if (objectHitname == 'dynamicground') {
         // alert('ADD');
          var locationX = item.point.x ;  // Gives the point of intersection in world coords
          var locationZ = item.point.z;
          var coords = new THREE.Vector3(locationX, 0, locationZ);
      
         scene.worldToLocal(coords);  // to add bins in correct position, neew local coords for the world object
//alert('dynamicbincreationFlagbefore' +  dynamicbincreationFlag);
        if(dynamicbincreationFlag == 'Y'){
dynamicbincreationFlag = 'N';
             addbin(coords.x,coords.z);
             
         }
        
        
          }

          
        }
 animate();
        return false;
                     
  }


    function addbin(x,z) {

       // alert('dynamicbincreationFlag' +  dynamicbincreationFlag);
dynamicbincreationFlag = 'N';
         var dynamiclength = document.getElementById( "GoodsLength" ).value;
         var dynamicwidth = document.getElementById( "GoodsWidth" ).value;
         var dynamicheight= document.getElementById( "Goodsheight" ).value;
         // Create the container.
           widthdy = Scalingvalue * dynamiclength;
             heightdy = Scalingvalue * dynamicheight;
            lengthdy = Scalingvalue * dynamicwidth;
            var geometry = new THREE.BoxGeometry(  widthdy, heightdy, lengthdy );
            // var geometry = new THREE.BoxGeometry(  length, height, width );
            // geometry.translate( 0.5, 0.5, 0.5 );
           // var material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/Translucent_Glass_Corrugated.jpg' ) } );
               var material = new THREE.MeshBasicMaterial( { color: 'green'} );

            container = new THREE.Mesh( geometry, material );
            //outlineContainer = new THREE.BoxHelper( container,'#828282');
            outlineContainer = new THREE.BoxHelper( container, '#3E424B' );

            container.add( outlineContainer );
           /*container.position.x = x;
            container.position.z = z;
            container.position.y =  0.1;*/

 container.position.x =  x + (widthdy / 2);
container.position.y = ( heightdy / 2) + 0.1; 
container.position.z =   z + (widthdy / 2) ;




            scene.add( container );
            tooltipEnabledObjects.push(container);
                
            objects.push( container );
            collisions.push(container);

            container.name = "dynamicbin";

            //mouseAction = ADD;
            container.userData.currentPosition = new THREE.Vector3();

            
    
    }

Also as of now i have added the code controls.enabled =true to control the model but it gets freeezed.
is there any way to control it
dynamicmodelCopy.zip (263.9 KB)
please find the attachment for the entire proj

can anyone guide me on this.
Any help would be highly appreciated

Thanks,
Jane.

2

You don’t really show the values of your “mouse” object.
You know it should have values of x and y between -1 and 1?

3

also, why do you add this?

container.position.x = x + (widthdy / 2);
container.position.y = ( heightdy / 2) + 0.1;
container.position.z = z + (widthdy / 2) ;

The cube geometry is created with the origin of the geometry at the center of the box.
If you add this offset, the cube won’t be centered around where you clicked.
Here, it should mean one of the corners of your box is gonna be where you clicked.