Three.js math example 02

Copy

// three
var renderer;
var scene;
var camera;
var width;
var height;
var container;

// math
var props = {
  segments: 100,
  xMin: -25,
  xMax: 25,
};

init();
animate();

function init() {
  container = document.getElementById('container');
  width = container.clientWidth;
  height = container.clientHeight;

// scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

// camera
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  camera.position.set(50, 80, 130);
  camera.lookAt(0, 0, 0);

// helper
  var grid = new THREE.GridHelper(200, 20);
  scene.add(grid);

var axes = new THREE.AxesHelper(100);
  axes.position.set(0, 0, 0);
  scene.add(axes);

// renderer
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);

// controls
  var controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.screenSpacePanning = true;

draw();

window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  width = container.clientWidth;
  height = container.clientHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}

function draw() {
  createGraph([
    [4, -1, 1]
  ]);

createGraph([
    [0, 1, 1]
  ]);
}

function createGraph(A) {
  var X = generateX(
    props.xMin,
    props.xMax,
    props.segments
  );

A = math.transpose(A);
  X = math.transpose(X);

var B = math.transpose(math.multiply(A, X));
  var geom = new THREE.Geometry();
  var material = new THREE.PointsMaterial({color: 0xffff77, size: 2, sizeAttenuation: false});

console.log(A, X, B);

B.forEach(function (b) {
    geom.vertices.push(new THREE.Vector3(b[0], b[1], b[2]));
  });

var cloud = new THREE.Points(geom, material);
  scene.add(cloud)
}

function generateX(xMin, xMax, segments) {
  var X = [];
  var xSegments = (xMax - xMin) / segments;

for (var x = xMin; x <= xMax; x += xSegments) {
    X.push([x]);
  }

return X;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js math example 02</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.2/math.min.js"></script>
    <script src="http://www.3daysofprogramming.com/playground/examples/resources/js/stats.js"></script>
    <style>
      #container {
        position: relative;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
    </div>
    <script>
      // three
      var renderer;
      var scene;
      var camera;
      var width;
      var height;
      var container;

      // math
      var props = {
        segments: 100,
        xMin: -25,
        xMax: 25,
      };

      init();
      animate();

      function init() {
        container = document.getElementById('container');
        width = container.clientWidth;
        height = container.clientHeight;

        // scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        // camera
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
        camera.position.set(50, 80, 130);
        camera.lookAt(0, 0, 0);

        // helper
        var grid = new THREE.GridHelper(200, 20);
        scene.add(grid);

        var axes = new THREE.AxesHelper(100);
        axes.position.set(0, 0, 0);
        scene.add(axes);

        // renderer
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        container.appendChild(renderer.domElement);

        // controls
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.screenSpacePanning = true;

        draw();

        window.addEventListener('resize', onWindowResize, false);
      }

      function onWindowResize() {
        width = container.clientWidth;
        height = container.clientHeight;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
      }

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        renderer.render(scene, camera);
      }

      function draw() {
        createGraph([
          [4, -1, 1]
        ]);

        createGraph([
          [0, 1, 1]
        ]);
      }

      function createGraph(A) {
        var X = generateX(
          props.xMin,
          props.xMax,
          props.segments
        );

        A = math.transpose(A);
        X = math.transpose(X);

        var B = math.transpose(math.multiply(A, X));
        var geom = new THREE.Geometry();
        var material = new THREE.PointsMaterial({color: 0xffff77, size: 2, sizeAttenuation: false});

        console.log(A, X, B);

        B.forEach(function (b) {
          geom.vertices.push(new THREE.Vector3(b[0], b[1], b[2]));
        });

        var cloud = new THREE.Points(geom, material);
        scene.add(cloud)
      }

      function generateX(xMin, xMax, segments) {
        var X = [];
        var xSegments = (xMax - xMin) / segments;

        for (var x = xMin; x <= xMax; x += xSegments) {
          X.push([x]);
        }

        return X;
      }
    </script>
  </body>
</html>