MyPoints.

I use MyPoints in my three.js projects for create THREE.Points.

Content

Quick start.
Points settings.
Raycaster.
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>MyPoints</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="https://github.com/anhr/commonNodeJS/tree/master/myPoints" target="_blank" rel="noopener">MyPoints</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;

		var camera, scene, renderer;

		init();
		animate();

		function init() {

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

			scene = new THREE.Scene();

			renderer = new THREE.WebGLRenderer( {

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

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

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

		}
		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>

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

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

Now you can use MyPoints in your javascript code. Please call MyPoints after creating of renderer for your future code. Example:

const arrayFuncs = [
	[],//first point. Zero position. White color.
	[ 0.5, 0.5, 0.5 ],//second point. White color.
];
new MyPoints( arrayFuncs, scene );

You can see two small white points on your canvas.

Points settings

Change points size to 25 and point color of the second point to green.

const arrayFuncs = [
	[],//first point. Zero position. White color.
	[
		0.5,//x
		0.5,//y
		0.5,//z
		0.5//w - color of the point is green
	]//second point
];
new MyPoints( arrayFuncs, scene, {

	options: {

		point: { size: 25 },//new size of all points

	}

} );

w coordinate of the second point is index of the color of the color palette. Currently I use default ColorPicker.paletteIndexes.BGYW (blue, green, yellow, white) palette. 0.5 value of w coordinate of the second point is index of the green color for default color palette. You can select another palette. Please import ColorPicker into your web page for it.

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

Create a palette. For example ColorPicker.paletteIndexes.bidirectional palette and add new palette into settings.options parameter of MyPoints

new MyPoints( arrayFuncs, scene, {

	options: {

		point: { size: 25 },//new size of all points
		palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.bidirectional } ),

	}

} );

Default 1 value of w coordinate of the first point is index of the green color for ColorPicker.paletteIndexes.bidirectional palette.

0.5 value of w coordinate of the second point is index of the dark color for ColorPicker.paletteIndexes.bidirectional palette.

Raycaster.

First, import Options.

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

Add event listener for raycaster.

Note. Please create event listener after creating of camera and renderer and before creating of myPoints.

const eventListeners = new Options.raycaster.EventListeners( camera, renderer, {

	scene: scene,

} );

Add new raycaster key into settings.options and settings.pointsOptions parameters of MyPoints.

//const cursor = renderer.domElement.style.cursor;
new MyPoints( arrayFuncs, scene, {

	options: {
		point: { size: 25 },
		palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.bidirectional } ),
		raycaster: {

			addParticle: function ( item ) {

				eventListeners.addParticle( item );

			},

		}

	},
	pointsOptions: {

		//shaderMaterial: false,
		raycaster: {
			
			/*
			onIntersection: function ( intersection, mouse ) {

				renderer.domElement.style.cursor = 'pointer';

			},
			onIntersectionOut: function () {

				renderer.domElement.style.cursor = cursor;

			},
			*/
			onMouseDown: function ( intersection ) {

				alert( 'You have clicked over point' );

			},

		}

	}

} );

Please move mouse over center of any point. Mouse cursor will change to "pointer". You can see an alert if you click a point.

Currently you see alert only if user click in the center of the point. You can icrease the click area. Please add new threshold key into settings parameter of new Options.raycaster.EventListeners for it.

const eventListeners = new Options.raycaster.EventListeners( camera, renderer, {

	threshold: 0.1,
	scene: scene,

} );

Example of your web page.

The following code is the result of this tutorial.