如何在three.js中修改ArrowHelper的长度

时间:2018-06-17 21:32:00

标签: javascript vector three.js

我使用ArrowHelpers来模拟和显示对象上的力。矢量的长度表示力的大小。 但是:修改我的arrowhelper的长度似乎没有任何明显的效果。在查看场景时,我的所有ArrowHelper似乎都具有在构造期间分配给它们的长度。向量的方向已正确更新。我究竟做错了什么?这是我的代码:

// construction:
ARROW_GRAVITY = new THREE.ArrowHelper( dir, origin, length, 0xDD3377 );
SCENE.add( ARROW_GRAVITY );

// updating scene:
ARROW_GRAVITY.position.copy(BULLET.position);
var dirGrav = new THREE.Vector3( 0, -1, 0 );
dirGrav.normalize(); // not necessary in this case, I know
ARROW_GRAVITY.setDirection(dirGrav);
var gravForce = PROJ_MASS * 9.8;
ARROW_GRAVITY.length = gravForce;
ARROW_GRAVITY.updateMatrix();
console.log(ARROW_GRAVITY.length); // works as expected (returns gravForce)

2 个答案:

答案 0 :(得分:0)

有关如何更改ArrowHelper的长度,请参阅documentation

arrowHelper.setLength( length );

注意:还有其他可选参数。

three.js r.93

答案 1 :(得分:0)

除了WestLangley的回答之外,带有参数的.setLength()按预期工作:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(4);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101000);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var dir = new THREE.Vector3(0, 1, 0);
var arrow = new THREE.ArrowHelper(dir, scene.position, 2);
scene.add(arrow);

scene.add(new THREE.GridHelper(4, 4));

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  arrow.setLength(Math.cos(time) * 0.5 + 1.5, 0.5, 0.1);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>