Three.js - 如何更新arrowHelper?

时间:2013-12-12 21:47:17

标签: three.js

我正在尝试更新arrowHelper。我已经尝试过操纵箭头对象行中的顶点,设置所有dynamic = true等等,但我能做到的唯一方法就是删除旧行并绘制一个新行一。有没有办法更新arrowHelper?

2 个答案:

答案 0 :(得分:4)

因此,通过更改用于创建对象的值,您无法以通常的方式更新arrowHelper本身。

然而:你可以移动箭头的位置,移动它的明显起点,你可以给它一个新的方向和长度,这会移动它的明显终点。

以下是如何操作:

// new arrowHelper
var sourcePos = new THREE.Vector3(0, 0, 0);
var targetPos = new THREE.Vector3(0, 50, 0);
var direction = new THREE.Vector3().sub(targetPos, sourcePos);
var arrow = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, direction.length(), 0x00ff00);
scene.add(arrow);

// update the arrow
var newSourcePos = new THREE.Vector3(10, 10, 10);
var newTargetPos = new THREE.Vector3(60, 10, 10);
arrow.position.set(newSourcePos);
direction = new THREE.Vector3().sub(newTargetPos, newSourcePos);
arrow.setDirection(direction.normalize());
arrow.setLength(direction.length());

答案 1 :(得分:2)

感谢回答了这个问题的人们,它无疑对我有所帮助。人们要避免一些小问题:

在倒数第二行代码中调用direction.normalize()会将方向向量更改为单位向量,因此会丢失原始长度。您可以更改最后两行的顺序,从未修改的方向矢量设置箭头长度,或者(也许更清晰)可以将其长度保存在单独的变量中。不过,如果不进行某些修改,箭头将始终设置为单位长度。

此外,函数arrow.setLength(length,headLength,headWidth)接受答案中显示的参数以外的两个参数(自编写以来,此参数可能已更改吗?)。通过在调用中不提供显式值来接受headLength和headWidth的默认值,将导致覆盖构造函数中可能已经提供的任何非默认值(而不是保持设置的值)。