Zdog Box 高度不会增长答案

【问题标题】：Zdog Box height won't growZdog Box 高度不会增长
【发布时间】：2019-09-27 18:17:09
【问题描述】：

我正在用 Zdog 制作一个 3D 盒子，我想让盒子的高度增加。这是一个代码笔：https://codepen.io/anon/pen/qzBMgp。

这是我的盒子代码：

let progressBox = new Zdog.Box({
  addTo: progress,
  width: 200,
  height: boxHeight,
  depth: 200,
  stroke: 1,
})

这是我用来增加盒子高度的代码。如果盒子比400短，盒子的高度会增加0.1。

function animate() {

   if (boxHeight < 400) {
      moveUp = 'up';
    } else if (boxHeight > 400) {
      moveUp = 'false';
    }
      boxHeight += moveUp == 'up' ? 0.1 : 0;
 }

问题是盒子保持在0（我给boxHeight的值）的高度，但是当我console.log(boxHeight)boxHeight会增长。

【问题讨论】：

首先将您的else if 语句更改为else，因为它必须以后者结尾，并且不需要条件boxHeight > 400。您可以选择将其缩短为：(boxHeight < 400) ? moveUp = 'up' : moveUp = 'false';
@Adrift 我添加了一个密码笔！

标签： javascript 3d height

【解决方案1】：

首先，让我指出你不能改变 constant 的值。在您的代码中，boxHeight 被声明为 const。

其次，你需要使用 Zdog 的copy() 方法。这是您相应修改的代码。

Zdog.Anchor.prototype.renderGraphSvg = function (svg) {
  if (!svg) {
    throw new Error('svg is ' + svg + '. ' +
      'SVG required for render. Check .renderGraphSvg( svg ).');
  }
  this.flatGraph.forEach(function (item) {
    item.render(svg, Zdog.SvgRenderer);
  });
};

const TAU = Zdog.TAU;
const light = '#EAE2B7';
const yellow1 = '#FCBF49';
const orange1 = '#F77F00';
const red1 = '#d62828';
const purple1 = '#003049';
const white1 = '#ffffff';
const isSpinning = true;
var boxHeight = 0;


let progress = new Zdog.Illustration({
  element: '.progress',
  dragRotate: true,
  translate: {
    y: 25
  },
  rotate: {
    x: -0.4, y: 0.75
  }
});

let progressBox = new Zdog.Box({
  addTo: progress,
  width: 200,
  depth: 200,
  height: boxHeight,
  stroke: 1,
  color: purple1, // default face color
  leftFace: yellow1,
  rightFace: orange1,
  topFace: red1,
  bottomFace: light,
  translate: {
    x: 0,
    y: 300
  },
});



function animate() {

  if (boxHeight <= 400) {
    boxHeight++; // 1

    progressBox = progressBox.copy({
      height: boxHeight, // overwrite height
      translate: {
          y: progressBox.translate.y - 1 // overwrite vertical position to put box in place while height is growing.
      }
    });
  }


  progress.updateRenderGraph();
  requestAnimationFrame(animate);

}

animate();

我把你的笔分叉了，并用上面的代码更新了它。见Zdog - progress box

请注意，在每个动画帧上执行copy() 方法似乎很昂贵。我也是这个库的新手，这是我目前知道的修复方法。

【讨论】：