时间戳

首页 > 解决方案 > Three.js：使用鼠标选择线条对象

javascript - Three.js：使用鼠标选择线条对象

问题描述

有没有办法在threeJS中选择线对象？

我尝试使用 raycaster

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

运行测试时出现此错误

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)

有什么解决办法？

标签： javascriptthree.js

解决方案

问题是您为线创建了自己的几何点。（https://threejs.org/docs/#api/en/objects/Line）

您应该使用 THREE.Vector3 构造函数，而不是创建自己的对象。原因是 THREE.Vector3 在其原型上有一个名为 distanceTo 的方法。当您手动创建坐标时，该方法丢失了。

... 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 ...

打线有点困难，但有可能。

http://jsfiddle.net/za9t2j5x/

推荐阅读