Question

我尝试使用ArrowHelper更新3 three.js的组件。现在，我只能通过在每次调用绘图函数时分配新动画来成功更新动画的3 ArrowHelper。

例如，在我的main函数中，我首先分配3个ArrowHelper，如下所示：

// Parameters for vector
var directionMainVectorX = new THREE.Vector3(1, 0, 0);
var directionMainVectorY = new THREE.Vector3(0, 1, 0);
var directionMainVectorZ = new THREE.Vector3(0, 0, 1);

var originMainVector = new THREE.Vector3(0, 0, 0);
var lengthVector = 20;
var widthVector = 3;
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;

mainVectorX = new THREE.ArrowHelper(directionMainVectorX, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorY = new THREE.ArrowHelper(directionMainVectorY, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorZ = new THREE.ArrowHelper(directionMainVectorZ, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);

然后，进入drawVector()函数，我有：

function drawVector() {

  // Parameters for ArrowHelper
  var headLengthVector = 1.5;
  var headWidthVector = 1.5;
  var hexVector = 0x11ff00;
  var widthVector = 3;

  // SOLUTION : Allocating each time a new vector
  mainVectorX = new THREE.ArrowHelper(directionMainVectorX.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
  mainVectorY = new THREE.ArrowHelper(directionMainVectorY.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
  mainVectorZ = new THREE.ArrowHelper(directionMainVectorZ.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);

  // Width for mainVector
  mainVectorX.line.material.linewidth = widthVector;    
  mainVectorY.line.material.linewidth = widthVector;    
  mainVectorZ.line.material.linewidth = widthVector;    

  // Add arrows to scene reference
  scene.add(mainVectorX);
  scene.add(mainVectorY);
  scene.add(mainVectorZ);    

}

最后，我的render函数：

function render() {

  rotateCamera();

  drawVector();

  controls.update();

  renderer.render(scene, camera);

  scene.remove(mainVectorX);
  scene.remove(mainVectorY);
  scene.remove(mainVectorZ);

}

使用上面的所有代码，一切正常。

我的问题是我不想使用“allocating at each call of drawVector() function”。

这就是为什么我开始只分配一次3 ArrowHelper（我在main代码的开头做）并使用drawVector()函数更新它们的组件，就像这样：

function drawVector() {

  // Parameters for ArrowHelper
  var headLengthVector = 1.5;
  var headWidthVector = 1.5;
  var hexVector = 0x11ff00;
  var widthVector = 3;

  // Compute coordinates of 3vectors

  // Compute directions
  directionMainVectorX.set(1, 0, 0);
  directionMainVectorY.set(0, 1, 0);  
  directionMainVectorZ.set(0, 0, 1);    

  // Update mainVector

  // SOLUTION : update the parameters of vector
  mainVectorX.position.set(originMainVector);
  mainVectorY.position.set(originMainVector);
  mainVectorZ.position.set(originMainVector);    

  mainVectorX.setDirection(directionMainVectorX.normalize());
  mainVectorY.setDirection(directionMainVectorY.normalize());  
  mainVectorZ.setDirection(directionMainVectorZ.normalize());  

  mainVectorX.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorX.setColor(hexVector)

  mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorY.setColor(hexVector)

  mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorY.setColor(hexVector)    

  // Add arrows to scene reference
  scene.add(mainVectorX);
  scene.add(mainVectorY);
  scene.add(mainVectorZ);    
}

我在上一篇文章中看到了这种方法：update ArrowHelper

但不幸的是，没有出现，我错过了一些东西，但我不知道是什么......

如果有人可以帮助我，那就太好了。

Answer 1

x, y, z需要3个参数 - mainVectorX.position.set(originMainVector.x,originMainVector.y,originMainVector.z);而不是另一个参数所以你应该使用 mainVectorX.position.copy(originMainVector); 或function drawVector() { // Parameters for ArrowHelper var headLengthVector = 1.5; var headWidthVector = 1.5; var hexVector = 0x11ff00; var widthVector = 3; if(!mainVectorX.parent){ // Add transported arrow to scene reference scene.add(mainVectorX); scene.add(mainVectorY); scene.add(mainVectorZ); } mainVectorX.position.copy(originMainVector); mainVectorY.position.copy(originMainVector); mainVectorZ.position.copy(originMainVector); mainVectorX.setDirection(directionMainVectorX.normalize()); mainVectorY.setDirection(directionMainVectorY.normalize()); mainVectorZ.setDirection(directionMainVectorZ.normalize()); mainVectorX.setLength(lengthVector, headLengthVector, headWidthVector); mainVectorX.setColor(hexVector); mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector); mainVectorY.setColor(hexVector); mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector); mainVectorY.setColor(hexVector); }

重写你的drawVector（现在它可以称为updateVector :)）

scene.remove(mainVectorX);
scene.remove(mainVectorY);
scene.remove(mainVectorZ);

当然你应该删除

stash

来自渲染功能

难以更新ArrowHelper而不分配新的ArrowHelper

1 个答案: