Question

我想与Mathbox并排显示两个同步的动画情节。请参阅以下最小示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty</title>
  <script src="mathbox-bundle.js"></script>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>
    var mathbox = mathBox({
      plugins: ['core', 'controls', 'cursor', 'mathbox'],
      controls: {
        // Orbit controls, i.e. Euler angles, with gimbal lock
        klass: THREE.OrbitControls,

        // Trackball controls, i.e. Free quaternion rotation
        //klass: THREE.TrackballControls,
      },
    });
    if (mathbox.fallback) throw "WebGL not supported"

    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);



    // Do stuff with mathbox,
    // for example: (see docs/intro.md)

    var camera = mathbox.camera({
        proxy: true,
        position: [0, 0, 3],
        });

    var view = mathbox.cartesian({
        range: [[-0.5, 1.5], [-1, 1]],
        scale: [2.0, 1.5],
        });


    view
        .axis({
            axis: 1,
            width: 3,
        })
        .axis({
            axis: 2,
            width: 3,
        })
        .grid({
            width: 1,  
            divideX: 11,
            divideY: 16,        
        });



    var data =
      view
      .interval({
        expr: function (emit, x, i, t) {
          emit(x, -(x-1)*(x-1));
        },
        width: 64,
        channels: 2,
      });
    var curve2 =
        view.line({
            width: 5,
            color: '#205899',
        });

    var data3 = 
        view.interval({
            expr: function(emit, x, i, t) {
                var xx = 0.25+0.25*Math.sin(t);
                var fnc = function(x){return -(x-1)*(x-1);}
                emit(0, 0);
                emit(xx, fnc(xx));
            },
            width: 1,
            channels: 2,
            items: 2,

        })
        .vector({

        width: 5,

        color: '#50A000',
      });



  </script>
</body>
</html>

您需要在同一文件夹中运行mathbox-bundle.js来运行它。我想在该图旁边显示另一个图，该图在“绿线的斜率与绿线的长度之比”图中显示了绿线的长度。

对此的数学显然很简单，但我的问题是，如何添加另一个已同步的图形？

Mathbox同步两个图形

0 个答案: