Geting an error : Cannot read property 'point' of undefined at HTMLDocument.onDocumentMouseMove in three.js

Questions
1

Hi,
I’m trying to drag a cube placed inside a open cube.
However I’m unable to do it.I’m getting an error

Uncaught TypeError: Cannot read property ‘point’ of undefined
at HTMLDocument.onDocumentMouseMove
There seems to be some issue with this line
offset.copy(intersects[0].point).sub(plane.position);
please find the below function

 function onDocumentMouseDown(event) {
    // Get mouse position
    console.log('onDocumentMouseDown');
    
    var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    var mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    // Get 3D vector from 3D mouse position using 'unproject' function
    var vector = new THREE.Vector3(mouseX, mouseY, 1);
    vector.unproject(camera);

    // Set the raycaster position
    raycaster.set(camera.position, vector.sub( camera.position ).normalize() );

    // Find all intersected objects
    var intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
      // Disable the controls
      controls.enabled = false;

      // Set the selection - first intersected object
      selection = intersects[0].object;

      // Calculate the offset
      var intersects = raycaster.intersectObject(plane);
      offset.copy(intersects[0].point).sub(plane.position);
      // container.style.cursor = 'move';
    }
  };

Can some one help me fix this issue

2 
var intersects = raycaster.intersectObject(plane); 
offset.copy(intersects[0].point).sub(plane.position);

It seems the call of Raycaster.intersectObject() does not return any intersections. Accessing the first element in the array produces an undefined result (since the array is empty).

1 Like
3

Hi,
Thanks for the response.
Is there any way to fix this issue

4

Well, you have to find out why there is no intersection with your plane…

5

Hi,
I had some statements printed in the console to check whether the intersection happens.
The statements did get printed however.i have changed the code now.
I have used DragControls but it gets stuck at event.object.material.emissive.set( 0xaaaaaa );
here I’m trying to move the boxes horizontally and vertically both.
i’m trying to place the boxes on top of one another by move.
but get stuck at dragend.
i have attached the project.
could you please look into it.I’ve been looking into it since 2 days.failed to understand the issue.Its been a week only that ive started to learn
warehousemodel (1).zip (1.2 MB)

Thanks in Advance

6

I’ve debugged your code and resolved a few errors:

  • Importing stats.module.js with a script tag does not work since it’s an ES6 module. Make sure that you understand what ES6 modules are and how they work. This resource might help.
  • When using drag controls, you should disable OrbitControls and enable it again when the drag is done. Otherwise the interaction is very confusing since your drag and orbit at the same time.
  • MeshBasicMaterial does not have an emissive property since the material is unlit. Hence, you get a runtime error each time the drag events fire. Make sure to set the color property instead.

Your updated code: warehousemodel.zip (281.7 KB)

Sorry, but I have not the time to implement your entire app. For the other features (e.g. moving boxes around), I suggest you study the code of:

https://threejs.org/examples/webgl_interactive_voxelpainter

Some parts of it might be useful for you.

7

Thank you soo much michael :slight_smile:

1 Like