point-cloud-visualiser v1.3.0

point-cloud-visualiser

point-cloud-visualiser is a react component which can be used to visualise point clouds (PCs).

Installation

To start using point-cloud-visualiser install using npm:

npm i point-cloud-visualiser

Parameters

The table below defines the parameters which can be passed to the component in order to define the PC.

Examples

The following examples show how the parameters defined above can be put to use.

Example 1 - using points parameter

import {PointCloudVisualiser} from 'point-cloud-visualiser'
import './App.css';

function getPoints(numberOfPoints) {
  const points = Array(numberOfPoints)
  for(var i=0 ; i<numberOfPoints; i++) {
    const point = Array(3)
    if(i % 6 == 0) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = - 0.5
    } else if(i % 6 == 1) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = 2.5
        point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 2) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = 0.5
    } else if(i % 6 == 3) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = - 2.5
        point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 4) {
        point[0] =  6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 5) {
        point[0] = - 6.5
        point[1]= (Math.random() * 5) - 2.5
        point[2] = (Math.random() * 1) - 0.5
    }
    points[i]=point
  }
  return points
}

function App() {
  return (
    <>
    <PointCloudVisualiser points={getPoints(100000)} />
    </>
    
  );
}

export default App;

The result of the above can be seen below:

Example 2 - using the points function parameter

Example 1 is a good approach where you're reading points in from a file. However when you want to define the points using a function use this approach. The outcome is identical to example 1.

import {PointCloudVisualiser} from 'point-cloud-visualiser'
import './App.css';

function getPoint(i) {
    const point = Array(3)
    if(i % 6 == 0) {
      point[0] = (Math.random() * 13) - 6.5
      point[1] = (Math.random() * 5) - 2.5
      point[2] = - 0.5
    } else if(i % 6 == 1) {
      point[0] = (Math.random() * 13) - 6.5
      point[1] = 2.5
      point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 2) {
      point[0] = (Math.random() * 13) - 6.5
      point[1] = (Math.random() * 5) - 2.5
      point[2] = 0.5
    } else if(i % 6 == 3) {
      point[0] = (Math.random() * 13) - 6.5
      point[1] = - 2.5
      point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 4) {
      point[0] =  6.5
      point[1] = (Math.random() * 5) - 2.5
      point[2] = (Math.random() * 1) - 0.5
    } else if(i % 6 == 5) {
      point[0] = - 6.5
      point[1]= (Math.random() * 5) - 2.5
      point[2] = (Math.random() * 1) - 0.5
    }
    return point
}

function App() {
  return (
    <>
    <PointCloudVisualiser pointFunction={getPoint} numberOfPoints={100000} />
    </>
    
  );
}

export default App;

Examples of how to style the point cloud

The following examples show how the parameters can be used to style the point cloud.

Example 1 - changing the point colour

import {PointCloudVisualiser} from 'point-cloud-visualiser'
import './App.css';

function getPoint(i) {
  const point = Array(3)
  
  var x = Math.random() -0.5
  var y = Math.random() -0.5
  var z = Math.random() -0.5

  point[0] = x * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5
  point[1] = y * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5
  point[2] = z * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5

  return point
}

function App() {
  return (
    <>
    <PointCloudVisualiser pointFunction={getPoint} numberOfPoints={100000} pointColour={'#33E3FF'} />
    </>
    
  );
}

export default App; />

The result of the above can be seen below:

Example 3 - specifying each of the points' colour

import {PointCloudVisualiser} from 'point-cloud-visualiser'
import './App.css';

function getPoints(numberOfPoints) {
  
  const points = Array(numberOfPoints)
  for(var i=0 ; i<numberOfPoints; i++) {
  
  const point = Array(3)
  
  var x = Math.random() -0.5
  var y = Math.random() -0.5
  var z = Math.random() -0.5

  point[0] = x * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5
  point[1] = y * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5
  point[2] = z * (1 / Math.sqrt(Math.pow(x,2) + Math.pow(y,2)+ Math.pow(z,2))) * 5

  points[i]=point
  }
  return points
}

function getPointsColour(points) {
  const colours = Array(points.length)
  for(var i=0 ; i<points.length ; i++) {
    colours[i] = points[i][1] > 0 ? 0x0057b8 : 0xFFD700
  }
  return colours
}

function App() {

  const numberOfPoints = 100000
  const points = getPoints(numberOfPoints)
  const pointsColour = getPointsColour(points)

  return (
    <>
    <PointCloudVisualiser points={points} pointsColour={pointsColour}/>
    </>
    
  );
}

export default App;

The result of the above can be seen below:

Example 4 - specifying each of the points' colour using a function

The below example allows you to specify the points' colour by passing a function. The function will be passed the points x,y,z location and the index of the point in the points array. a hex value must be returned in response.

import { PointCloudVisualiser } from "point-cloud-visualiser"
import './App.css';

function getPoints(numberOfPoints) {
  const points = Array(numberOfPoints)
  for(var i=0 ; i<numberOfPoints; i++) {
    const point = Array(3)
    if(i > numberOfPoints - (numberOfPoints/2)) {
      point[0] = (Math.random() * 50) - 25
      point[1] = (Math.random() * 20) - 10
      point[2] = (Math.random() * 20) - 10
    } else if(i % 6 === 0) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = - 1.5
    } else if(i % 6 === 1) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = 2.5
        point[2] = (Math.random() * 3) - 1.5
    } else if(i % 6 === 2) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = 1.5
    } else if(i % 6 === 3) {
        point[0] = (Math.random() * 13) - 6.5
        point[1] = - 2.5
        point[2] = (Math.random() * 3) - 1.5
    } else if(i % 6 === 4) {
        point[0] =  6.5
        point[1] = (Math.random() * 5) - 2.5
        point[2] = (Math.random() * 3) - 1.5
    } else if(i % 6 === 5) {
        point[0] = - 6.5
        point[1]= (Math.random() * 5) - 2.5
        point[2] = (Math.random() * 3) - 1.5
    }
    points[i]=point
  }
  return points
}

function App() {

  const numberOfPoints = 180000
  const points = getPoints(numberOfPoints)
  const pointsColour = function(x,y,z,i) {
    if(i > numberOfPoints - (numberOfPoints/2)) {
      return 0x000000
    } else if(x === 6.5) {
      return 0xff0000
    } else if(x === - 6.5) {
      return 0xff0000
    } else if(y === 2.5) {
      return 0x00ff00
    } else if(y === -2.5) {
      return 0x00ff00
    } else if(z === 1.5) {
      return 0x0000ff
    } else if(z === -1.5) {
      return 0x0000ff
    }
    return 0x000000;
  }

  return (
    <>
    <PointCloudVisualiser points={points} pointColourFunction={pointsColour}></PointCloudVisualiser>
    </>
    
  );
}

export default App;

The result of the above can be seen below: