Question

我有一个TubeBufferGeometrys数组，我正在制作动画，看起来好像它们长得很长。当动画第一次运行时，它以60fps的速度运行非常顺畅。但是，一旦我将geometrys位置属性设置为零，FPS就会下降到30。

我已经将我的动画分离出来然后重新运行一旦完成，只有以下更改。以下是我的代码的基础知识：

动画控制视图

stop() {
  this.play = false;

  // Start it again
  setTimeout(() => {
    let i = this.tubeCount;
    while (i--) {
      this.tubes[i].lastSegmentSet = 0;
      this.tubes[i].updateToPercent(0);
    }

    this.elapsedTime = 0;
    this.startTime = Date.now();

    this.play = true;
  }, 2000)
}

update() {
  requestAnimationFrame(this.animate);
  // ..render stuff + composer that ive disabled without effect


  if (this.play) {
    let percent = (Date.now() - this.startTime) / ANIMATE_DURATION;
    if (percent >= 1) {
      this.stop();
    }

    let i = this.lineCount;
    while (i--) {
      this.tubes[i].updateToPercent(percent);
    }
  }
}

Tube类（主要动画代码）

constructor() {
  //..other stuff

  this.lastSegmentSet = 0;
}

// I first build the paths, then store the position data to use later to animate to. Then i set all the position data to zero
storeVerticies() {
  this.positions = this.tube.geometry.attributes.position.array.slice(0);

  const length = this.tube.geometry.attributes.position.array.length;
  this.tube.geometry.attributes.position.array = new Float32Array(length);
}

setSegment(segment) {
  this.setSegmentTo(segment, segment);
}

setSegmentTo(segment, target) {
  let position = this.tube.geometry.attributes.position.array;
  let startPoint = segment * JOINT_DATA_LENGTH; //JOINT_DATA_LENGTH is the number of values in the buffer geometry to update a segment
  let targetPoint = target * JOINT_DATA_LENGTH;

  let n = JOINT_DATA_LENGTH;
  while (n--) {
    position[startPoint + n] = this.positions[targetPoint + n];
  }
}

updateToPercent(percent) {
  let endSegment = Math.floor(percent * this.segmentCount);
  while (this.lastSegmentSet <= endSegment) {
    this.setSegment(this.lastSegmentSet++);
  }

  let n = this.lastSegmentSet;
  while (n <= this.segmentCount + 1) {
    this.setSegmentTo(n++, this.lastSegmentSet);
  }

  this.tube.geometry.attributes.position.needsUpdate = true;
}

尽可能放置赏金

THREE.js - 两次更新BufferGeometry位置会导致我的FPS受损

0 个答案: