SOURCE

var rectW = 1;
var rectH = 4;
var mathbox = mathBox({
  plugins: ['core', 'cursor', 'controls'],
  controls: {
    klass: THREE.OrbitControls,
  },
});
if (mathbox.fallback) throw "WebGL error";

// Set renderer background
var three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

// Set mathbox units and place camera
mathbox.set({
  scale: 1000,
  focus: 3
});
mathbox.camera({
  proxy: true,
  position: [0, 0, 3]
});

// Create cartesian view
var view = mathbox.cartesian({
  range: [[ - 4, 4], [ - 4, 4]],
  scale: [1, 1],
});

view.interval({
  expr: function(emit, x, i, t) {
    emit( - rectW / 2 + Math.sin(x) , 0 + Math.cos(x), 0);
    emit( - rectW / 2 + Math.sin(x), rectH + Math.cos(x), 0);
    emit(rectW / 2 + Math.sin(x), rectH + Math.cos(x), 0);
    emit(rectW / 2 + Math.sin(x), 0 + Math.cos(x), 0);
  },
  width: 2,
  items: 4,
  channels: 3,
});
view.face({
  color: 0x3090FF,
  width: 3,
})

<script src="http://acko.net/files/mathbox2/mathbox-bundle.min.js">
</script>