examples/vr/vector.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - VR</title>
  <script src="../../build/mathbox-bundle.js"></script>
  <link rel="stylesheet" href="../../build/mathbox.css">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>
    mathbox = mathBox({
      plugins: ['VR', 'ui', 'controls'],
      controls: {
        klass: THREE.VRControls
      },
    });
    three = mathbox.three;

    three.camera.position.set(0, .003, .01);
    three.renderer.setClearColor(new THREE.Color(0x000000), 1.0);

    var rad = 1000;
    var mag = .01;
    var v = new THREE.Vector3();
    var r = new THREE.Vector3();
    var q = new THREE.Vector3();
    var m = new THREE.Vector3(0, rad, 0);
    var l = 0;

    var expression = function (emit, x, y, z, i, j, k) {
      // dipole magnetic field
      r.set(x, y, z);
      l = r.length();
      r.multiplyScalar(1 / l);
      r.multiplyScalar(3 * r.dot(m)).sub(m).multiplyScalar(1 / (l * l * l));

      // perceptual scaling
      q.copy(r);
      l = q.length();
      q.normalize();
      q.multiplyScalar(Math.max(Math.log(l) + 1, 0) * mag);

      r.copy(q);

      emit(x, y, z);
      emit(x + r.x, y + r.y, z + r.z);
    };

    three.on('update', function () {
      t = Math.max(three.Time.clock, 0) / 50
      t = t < .5 ? t * t : t - .25
      t += 1

      c = Math.cos(t);
      s = Math.sin(t);
      if (!three.VR.active)
        view.set('quaternion', [0, -s, 0, c]);
      else
        view.set('quaternion', [0, .866, 0, .5]);

      t = Math.max(three.Time.clock, 0) / 3
      t = t < .5 ? t * t : t - .25

      f = Math.cos(t + Math.sin(t * 1.31 - Math.cos(t * .818)) + Math.cos(t * .91 - Math.cos(t * 1.273)));
      g = Math.sin(t - Math.sin(t * 1.52 - Math.cos(t * 1.19)) + Math.cos(t * .77 - Math.cos(t * 1.136)));
      h = Math.sin(t + Math.cos(t * 1.82 - Math.cos(t * 1.35)) + Math.cos(t * .85 - Math.cos(t * 0.974)));

      v.set(f, g, h);
      v.normalize();
      v.multiplyScalar(rad);

      m.multiplyScalar(.9);
      v.multiplyScalar(.1);
      m.add(v);
    });

    view = mathbox
      .unit({
        scale: 720,
      })
      .cartesian({
        range: [[-1, 1], [-1, 1], [-1, 1]],
        scale: [1, 1, 1],
        position: [0, -.25, -3],
      });

    view
    .transform({
      position: [0, -1, 0],
      scale: [5, 1, 5],
    })
    .grid({
      axes: [1, 3],
      width: 2,
      depth: 1,
      color: 0xffffff,
      opacity: .25,
      blending: THREE.AdditiveBlending,
    });


    view
    .transform({
      position: [0, -1, 0],
    })
    .axis({
      axis: 1,
      end: true,
      width: 3,
      depth: 1,
      size: 5,
      color: 0xffffff,
      opacity: .25,
      zBias: -1,
      blending: THREE.AdditiveBlending,
    });

    view.axis({
      axis: 2,
      end: true,
      width: 3,
      depth: 1,
      size: 5,
      color: 0xffffff,
      opacity: .25,
      zBias: -1,
      blending: THREE.AdditiveBlending,
    });

    view.transform({
      position: [0, -1, 0],
    })
    view.axis({
      axis: 3,
      end: true,
      width: 3,
      depth: 1,
      size: 5,
      color: 0xffffff,
      opacity: .25,
      zBias: -1,
      blending: THREE.AdditiveBlending,
    });

    view.volume({
      id: 'sampler',
      width:  12,
      height: 12,
      depth:  12,
      expr: expression,
      items: 2,
      channels: 3,
    });
    view.vector({
      color: 0x3090FF,
      width: 6,
      depth: 1,
      size:  2,
      end: true,
      zWrite: false,
      blending: THREE.AdditiveBlending,
    });

    view.array({
      width: 1,
      expr: function (emit, i) {
        emit(0, 0, 0);
        emit(m.x / 2000, m.y / 2000, m.z / 2000);
      },
      items: 2,
      channels: 3,
    });
    view.vector({
      color: 0xC05020,
      width: 10,
      depth: 1,
      size:  4,
      end: true,
    });

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