三.js:使用鼠标选择线条对象

Question

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

我试过使用光线投射器

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)

解决方案是什么？

Answer 1

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

你应该使用三个。Vector3 构造函数，而不是创建自己的对象。原因是三个。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/

Answer 2

三分中的点.js定义如下：

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

使用未缩小的版本three.js进行调试;使用three.min.js进行生产。

更新的小提琴：http://jsfiddle.net/z43hjqm9/45/

三.js R.97