FrustumPoints.

Array of points, statically fixed in front of the camera. I use FrustumPoints for displaying of the clouds around points. Example.

Content

Quick start.
Create FrustumPoints.
FrustumPoints Settings
Using dat.gui for manual change of the FrustumPoints settings.
Add Player.
Points color.
Example of your web page.

Quick start

Create a folder on your localhost named as [folderName].
- Download three.js repository into your "[folderName]\three.js\dev" folder.
- Download commonNodeJS repository into your "[folderName]\commonNodeJS\master" folder.
Add your web page into [folderName]. Example:

<!DOCTYPE html>

<html>
<head>
	<title>FrustumPoints</title>

	<link type="text/css" rel="stylesheet" href="https://threejs.org/examples/main.css">
	<!--<link type="text/css" rel="stylesheet" href="three.js/dev/examples/main.css">-->

	<!-- Three.js Full Screen Issue https://stackoverflow.com/questions/10425310/three-js-full-screen-issue/15633516 -->
	<!--<link type="text/css" rel="stylesheet" href="https://raw.githack.com/anhr/commonNodeJS/master/css/main.css">-->
	<link type="text/css" rel="stylesheet" href="commonNodeJS/master/css/main.css">

	<!--<script src="./three.js/dev/build/three.js"></script>-->
	<!--<script src="./three.js/dev/build/three.min.js"></script>-->
	<!--<script src="https://raw.githack.com/anhr/three.js/dev/build/three.js"></script>-->
	<!--<script src="https://raw.githack.com/anhr/three.js/dev/build/three.min.js"></script>-->
	<!--<script src="https://threejs.org/build/three.js"></script>-->
	<!--<script src="https://threejs.org/build/three.min.js"></script>-->
</head>
<body>
	<script nomodule>alert( 'Fatal error: Your browser do not support modular JavaScript code.' );</script>
	<div id="info">
		<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
		- <a href="./commonNodeJS/master/frustumPoints/jsdoc/index.html" target="_blank" rel="noopener">FrustumPoints</a>.
		By <a href="https://github.com/anhr" target="_blank" rel="noopener">anhr</a>
	</div>
	<div>
		<canvas id="canvas"></canvas>
	</div>

	<script type="module">

		import * as THREE from './three.js/dev/build/three.module.js';
		//import * as THREE from 'https://threejs.org/build/three.module.js';
		//import * as THREE from 'https://raw.githack.com/anhr/three.js/dev/build/three.module.js';

		import three from './commonNodeJS/master/three.js'
		three.THREE = THREE;

		import Options from './commonNodeJS/master/Options.js'

		var camera, scene, renderer, stereoEffect;

		init();
		animate();

		function init() {

			camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
			camera.position.copy( new THREE.Vector3( 0, 0, 0.4 ) );

			scene = new THREE.Scene();

			const options = new Options();

			renderer = new THREE.WebGLRenderer( {

				antialias: true,
				canvas: document.getElementById( 'canvas' ),

			} );
			renderer.setSize( window.innerWidth, window.innerHeight );

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

			//Orbit controls allow the camera to orbit around a target.
			//https://threejs.org/docs/index.html#examples/en/controls/OrbitControls
			options.createOrbitControls( camera, renderer, scene );

		}
		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			renderer.render( scene, camera );

		}

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

NOTE. Please include three.THREE = THREE; line into your project before use my library. See example above.

Create FrustumPoints

The easiest way to use FrustumPoints in your code is import FrustumPoints from FrustumPoints.js file in your JavaScript module. Example.

import FrustumPoints from './commonNodeJS/master/frustumPoints/frustumPoints.js';

Add frustumPoints key to the options parameter of Options.

const options = new Options( {

	frustumPoints: {},

} );

Now you can use FrustumPoints in your javascript code.

const canvas = document.getElementById( 'canvas' );
const gl = new FrustumPoints( camera, scene, canvas, { options: options, } ).gl;

Please edit the renderer after creating of FrustumPoints.

renderer = new THREE.WebGLRenderer({

    antialias: true,
    canvas: document.getElementById('canvas'),
    context: gl,

});

Currently your FrustumPoints is not visible. Please add points to highlight the FrustumPoints for visualisation. A FrustumPoints cloud will be visible around each new point.

First, include MyPoints.

import MyPoints from './commonNodeJS/master/myPoints/myPoints.js';

Add MyPoints after creating of FrustumPoints instance for create of points. For example:

const arrayFuncs = [
	[],//point with zero position and palette index = max = 1 is white color for ColorPicker.paletteIndexes.BGYW. See https://github.com/anhr/commonNodeJS/tree/master/colorpicker
	[
		-0.5,//x
		0,//y
		0,//z
		0//w. Palette index. Default range from 0 to 1. See https://github.com/anhr/commonNodeJS/tree/master/colorpicker
	]
];
new MyPoints( arrayFuncs, scene, { pointsOptions: { frustumPoints: options.frustumPoints, } } );

Now you can see two points on your canvas.

First point have palette index is 1 and white color.

Second point have palette index is 0 and blue color.

If you use THREE.Points for creating of the points, plase call

options.frustumPoints.pushArrayCloud( points );

points is instance of the THREE.Points.

Next, create frustumPoints after creating of MyPoints, renderer and options.createOrbitControls( camera, renderer, scene );.

options.frustumPoints.create( renderer );

Now you can see a cloud of the small dots around two points, you have created by MyPoints. Please move by mouse your points to near of the camera. You can see the cloud around points more details.

FrustumPoints Settings

Currently you use default settings of the frustumPoints. You can set you own settings. Plase edit frustumPoints key of the options for it. For example you can to display clouds around each point more details. Please change the following settings:

zCount - the count of layers of the frustum of the camera's field of view.

yCount - The count of vertical points for each z level of the frustum of the camera's field of view.

const options = new Options( {

	frustumPoints: {

		zCount: 100,
		yCount: 100,

	},

} );

See settings.options.frustumPoints parameter of FrustumPoints class for details.

NOTE! More details clouds takes huge resources of your GPU. You can see delays of visualization in this case.

Using dat.gui for manual change of the FrustumPoints settings.

First, import dat.gui.

import { dat } from './commonNodeJS/master/dat/dat.module.js';
three.dat = dat;

Add FrustumPoints settings into gui after options.frustumPoints.create( renderer ); line.

options.frustumPoints.gui();

Add Player.

First, import Player.

import Player from './commonNodeJS/master/player/player.js';

Add playerOptions key to the Options parameter. See settings.options.playerOptions of the Player for details.

const options = new Options( {

	frustumPoints: {

		zCount: 100,
		yCount: 100,

	},
	playerOptions: {

		marks: 100,//Ticks count of the playing.
		interval: 25,//Ticks per seconds.

	},

} );

Add Player after creating of the scene and frustumPoints and before creation of the points and renderer.

new Player( scene, { options: options, } );

Currently your player is not doing anything. Suppose you want to move point during playback. Plase edit arrayFuncs and MyPoints for it.

const arrayFuncs = [
	[],//point with zero position and palette index = max = 1 is white color for ColorPicker.paletteIndexes.BGYW. See https://github.com/anhr/commonNodeJS/tree/master/colorpicker
	{

		//move second point from [-0.5, -0.5, -0.5, ] for t = 0 to [0.5, 0.5, 0.5, ] for t = 1
		vector: new THREE.Vector4(
			new Function( 't', 'return t-0.5' ),//x
			0,//new Function( 't', 'return t-0.5' ),//y
			0,//new Function( 't', 'return t-0.5' ),//z
			new Function( 't', 'return t' ),//w palette index from 0 for t = 0 to 1 for t = 1
		),
		trace: true,

	}
];
new MyPoints( arrayFuncs, scene, {

		pointsOptions: {

			frustumPoints: options.frustumPoints,
			//shaderMaterial: false,
			onReady: function ( points ) {

				options.player.play3DObject();

			}
		},

} );

You can see above, the second point is moving from [-0.5, 0, 0] for t = 0 to [0.5, 0, 0] for t = 1. Color of the second point is changing from blue to white.

Player is start playing after creation of the points: options.player.play3DObject();. See onReady callback above.

Points color.

Current palette of the points colors is default. Default color palette index is ColorPicker.paletteIndexes.BGYW. You can select another palette. For example ColorPicker.paletteIndexes.bidirectional palette. Please import ColorPicker.

import ColorPicker from './commonNodeJS/master/colorpicker/colorpicker.js';

and add palette key to Options.

const options = new Options( {

	palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.bidirectional } ),
	frustumPoints: {

		zCount: 100,
		yCount: 100,

	},
	playerOptions: {

		marks: 100,//Ticks count of the playing.
		interval: 25,//Ticks per seconds.

	},

} );

Color of the first point is green.

Color of the second point is changing from red to green during playing.

Currently you use default range of the palette indexes from 0 to 1. You can set another range. For example from -1 to 1. Please add a scales key into Options parameter for it.

const options = new Options( {

	palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.bidirectional } ),
	frustumPoints: {

		zCount: 100,
		yCount: 100,

	},
	playerOptions: {

		marks: 100,//Ticks count of the playing.
		interval: 25,//Ticks per seconds.

	},
	scales: {

		w: {

			min: -1,
			max: 1,

		},

	}

} );

and change palette index of the second point to -1 is red color.

const arrayFuncs = [
	[],//point with zero position and palette index = max = 1 is white color for ColorPicker.paletteIndexes.BGYW. See https://github.com/anhr/commonNodeJS/tree/master/colorpicker
	{

		//move second point from [-0.5, -0.5, -0.5, ] for t = 0 to [0.5, 0.5, 0.5, ] for t = 1
		vector: new THREE.Vector4(
			new Function( 't', 'return t-0.5' ),//x
			0,//new Function( 't', 'return t-0.5' ),//y
			0,//new Function( 't', 'return t-0.5' ),//z
			-1,//new Function( 't', 'return t' ),//w red color for ColorPicker.paletteIndexes.bidirectional and palette index min = -1
		),
		trace: true,

	}
];

Now you can see the interference of the clouds color of the first and second points. Green color of the cloud of the first point is interferencing with red color of the cloud of the second point. As result you can see the dark color of the cloud if the second point is come near the first point.

Example of your web page.

The following code is the result of this tutorial.

<!DOCTYPE html>

<html>
<head>
	<title>FrustumPoints</title>

	<link type="text/css" rel="stylesheet" href="https://threejs.org/examples/main.css">
	<!--<link type="text/css" rel="stylesheet" href="three.js/dev/examples/main.css">-->
	<!-- Three.js Full Screen Issue https://stackoverflow.com/questions/10425310/three-js-full-screen-issue/15633516 -->
	<!--<link type="text/css" rel="stylesheet" href="https://raw.githack.com/anhr/commonNodeJS/master/css/main.css">-->
	<link type="text/css" rel="stylesheet" href="commonNodeJS/master/css/main.css">

	<!--<script src="./three.js/dev/build/three.js"></script>-->
	<!--<script src="./three.js/dev/build/three.min.js"></script>-->
	<!--<script src="https://raw.githack.com/anhr/three.js/dev/build/three.js"></script>-->
	<!--<script src="https://raw.githack.com/anhr/three.js/dev/build/three.min.js"></script>-->
	<!--<script src="https://threejs.org/build/three.js"></script>-->
	<!--<script src="https://threejs.org/build/three.min.js"></script>-->
</head>
<body>
	<script nomodule>alert( 'Fatal error: Your browser do not support modular JavaScript code.' );</script>
	<div id="info">
		<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
		- <a href="./commonNodeJS/master/frustumPoints/jsdoc/index.html" target="_blank" rel="noopener">FrustumPoints</a>.
		By <a href="https://github.com/anhr" target="_blank" rel="noopener">anhr</a>
	</div>
	<div>
		<canvas id="canvas"></canvas>
	</div>

	<script type="module">

		import * as THREE from './three.js/dev/build/three.module.js';
		//import * as THREE from 'https://threejs.org/build/three.module.js';
		//import * as THREE from 'https://raw.githack.com/anhr/three.js/dev/build/three.module.js';

		import three from './commonNodeJS/master/three.js'
		three.THREE = THREE;

		import Options from './commonNodeJS/master/Options.js'
		import FrustumPoints from './commonNodeJS/master/frustumPoints/frustumPoints.js';
		import MyPoints from './commonNodeJS/master/myPoints/myPoints.js';
		import { dat } from './commonNodeJS/master/dat/dat.module.js';
		three.dat = dat;
		import Player from './commonNodeJS/master/player/player.js';
		import ColorPicker from './commonNodeJS/master/colorpicker/colorpicker.js';

		var camera, scene, renderer, stereoEffect;

		init();
		animate();

		function init() {

			camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
			camera.position.copy( new THREE.Vector3( 0, 0, 0.4 ) );

			scene = new THREE.Scene();

			const options = new Options( {

				palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.bidirectional } ),
				frustumPoints: {

					zCount: 100,
					yCount: 100,

				},
				playerOptions: {

					marks: 100,//Ticks count of the playing.
					interval: 25,//Ticks per seconds.

				},
				scales: {

					w: {

						min: -1,
						max: 1,

					},

				}

			} );

			const canvas = document.getElementById( 'canvas' );

			const gl = new FrustumPoints( camera, scene, canvas, { options: options, } ).gl;

			new Player( scene, { options: options, } );

			const arrayFuncs = [
				[],//point with zero position and palette index = max = 1 is white color for ColorPicker.paletteIndexes.BGYW. See https://github.com/anhr/commonNodeJS/tree/master/colorpicker
				{

					//move second point from [-0.5, -0.5, -0.5, ] for t = 0 to [0.5, 0.5, 0.5, ] for t = 1
					vector: new THREE.Vector4(
						new Function( 't', 'return t-0.5' ),//x
						0,//new Function( 't', 'return t-0.5' ),//y
						0,//new Function( 't', 'return t-0.5' ),//z
						-1,//new Function( 't', 'return t' ),//w red color for ColorPicker.paletteIndexes.bidirectional and palette index min = -1
					),
					trace: true,

				}
			];
			new MyPoints( arrayFuncs, scene, {

					pointsOptions: {

						frustumPoints: options.frustumPoints,
						//shaderMaterial: false,
						onReady: function ( points ) {

							options.player.play3DObject();

						}
					},

			} );

			renderer = new THREE.WebGLRenderer( {

				antialias: true,
				canvas: document.getElementById( 'canvas' ),
				context: gl,

			} );
			renderer.setSize( window.innerWidth, window.innerHeight );

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

			//Orbit controls allow the camera to orbit around a target.
			//https://threejs.org/docs/index.html#examples/en/controls/OrbitControls
			options.createOrbitControls( camera, renderer, scene );

			options.frustumPoints.create( renderer );
			options.frustumPoints.gui();

		}
		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			renderer.render( scene, camera );

		}

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

Home