CODEWITHSUNDEEP
javascriptthree.jsclick
wen hou
wen hou

Reputation: 23

three.js how to draw line with mousedown event

I have try a lot of ways to complete this effect,i want to draw a line of mouse down event,and i have seen many other questions but do not have any idea about it,so far i use the Ray caster method of intersectObjects() and get the position of the click,but i do not how to then,Hope someone give me advice,thanks very much. Here are part of mine code:

event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;  
var raycaster=new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects,true);
console.log(intersects[0].point);//type of intersects[0] is object,one of attribute is point?

yesterday i write some codes and have complete part of my effect. Here are some code:

 var clickCount = 0;//initial value
 clickCount = clickCount+1;
 if(intersects.length>0)
 {
     switch(clickCount)
     {
         case 1:
                var startPoint=intersects[0].point;//store the first intersect point when the first click
                break;
    case 2:
                var endPoint =intersects[0].point;//store the second intersect point when the second click
                break;
     }
  }


clickCount=1;
var geometry = new THREE.Geometry();
material = new THREE.LineBasicMaterial({color:0xffffff,linewidth:2});
geometry.vertices.push(startPoint);
geometry.vertices.push(endPoint);
line = new THREE.Line(geometry, material);
scene.add(line);

but this is not the final effect what i wanted.this segment lines are all rays set up from the vector(0,0,0). here is the screenshot: the red line are what i want and the white lines are real

the red line is the effect what i want to implementate. Could anyone figure out the reason?thanks very much.

Upvotes: 2

Views: 1821

Answers (1)

prisoner849
prisoner849

Reputation: 17586

It's better to remember the first clicked object, then on the next click you will check, if it's the same object or another one, and if it's another one, then draw a line between them.

var intersected, lineObjects = [],
objects = [];
. . .

and in the event handler:

  if (intersects.length > 0) {
    var found = intersects[0].object;
    if (found != intersected) {
      if (lineObjects.length > 0) {
        var line = lineObj(lineObjects[0].position, found.position);
        scene.add(line);
        lineObjects[0].material.color.setHex(lineObjects[0].userData.oldColor);
        intersected = null;
        lineObjects = [];
      } else {
        found.userData.oldColor = found.material.color.getHex();
        found.material.color.set(0x00FF00);
        intersected = found;
        lineObjects.push(found);
      }
    } else {
      found.material.color.setHex(found.userData.oldColor);
      intersected = null;
      lineObjects = [];
    }
  }

I've made a jsfiddle example. Look at onMouseDown() function. All the things I described above are there.

Upvotes: 2

Related Questions