CODEWITHSUNDEEP
javascriptthree.js
Elmer Cusipuma
Elmer Cusipuma

Reputation: 67

Three.js: Select a line object using the mouse

Is there a way to select line object in threeJS?

I tried with raycaster

http://jsfiddle.net/nelsonlbtn/z43hjqm9/43/

Getting this error when I run test

three.min.js:598 Uncaught TypeError: d.distanceTo is not a function
    at pb.distanceSqToSegment (three.min.js:598)
    at pa.raycast (three.min.js:650)
    at xe (three.min.js:295)
    at uf.intersectObjects (three.min.js:863)
    at HTMLDocument.moveMouse ((index):107)

What could be the solution?

Upvotes: 2

Views: 840

Answers (2)

WestLangley
WestLangley

Reputation: 104793

Points in three.js are defined like so:

p1 = new THREE.Vector3( 0, 0, - 100 );
p2 = new THREE.Vector3( 100, 0, 0 );

Use the un-minified version three.js for debugging; use three.min.js for production.

updated fiddle: http://jsfiddle.net/z43hjqm9/45/

three.js r.97

Upvotes: 1

frithjof
frithjof

Reputation: 345

The issue was that you created your own geometry points for your line. (https://threejs.org/docs/#api/en/objects/Line)

You should use the the THREE.Vector3 constructor instead of creating your own objects. The reason is that THREE.Vector3 has a method on its prototype which is called distanceTo. When you manually created your coordinates that method was missing.

... inside the your init function ...
// instead of
/* p1 = {
    x: 0,
    y: 0,
    z: -100
  }
  p2 = {
    x: 100,
    y: 0,
    z: 0
  } */

  // do this
  p1 = new THREE.Vector3(0,0,-100)
  p2 = new THREE.Vector3(100,0,0)
 ... more init function ...

It is a bit difficult to hit the line but it is possible.

http://jsfiddle.net/za9t2j5x/

Upvotes: 1

Related Questions