AxesHelper.

An axis object to visualize the 1, 2 or 3 axes. I use AxesHelper in my three.js projects.

Content

Quick start.
Use the THREE.OrbitControls to rotate the camera.
Use Raycaster for mouse picking (working out what objects in the 3d space the mouse is over).
Choose a point at which the camera is looking.
Graphical user interface for changing settings.
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>AxesHelper</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/AxesHelper" target="_blank" rel="noopener">AxesHelper</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;

		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();

			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 );

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

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

import AxesHelper from './commonNodeJS/master/AxesHelper/AxesHelper.js';

Now you can use AxesHelper in your javascript code.

The simplest AxesHelper has at least one axis.

new AxesHelper( scene, options );

Now we want to customize AxesHelper.

Name of the X is 'time'. Number of X scale marks is 5.

Minimum Y is 0.

See options.scales of the AxesHelper for details.

Please edit options for it.

const options = new Options({

	scales: {

		text: {

			//Please specify the textHeight if you want the changing of the text height is available in gui.
			//Default textHeight is 0.04
			textHeight: 0.04,

			//fov: camera.fov,

			//Precision of the scale marks is 3 digit.
			//Please specify the precision if you want the changing of the precision is available in gui.
			//Default precision is 4.
			precision: 3,

		},
		x: {
		
			name: 'time',
			marks: 5
		
		},
		y: {
		
			min: 0,
		
		},
		z: {}

	}

});

Use the THREE.OrbitControls to rotate the camera.

Add line after creating of the renderer in your code.

options.createOrbitControls( camera, renderer, scene );

Use Raycaster for mouse picking (working out what objects in the 3d space the mouse is over).

Please create an 3D object, for example points.

Use THREE.Points.

const arrayFuncs = [
	new THREE.Vector3( 0.5, 0.5 ,0.5 ),
	new THREE.Vector3( -0.5, -0.5 ,-0.5 )
]
const points = new THREE.Points( new THREE.BufferGeometry().setFromPoints( arrayFuncs ),
	new THREE.PointsMaterial( {

		color: 0xffffff,
		size: 5,//0.05,
		sizeAttenuation: false,
		alphaTest: 0.5,

	} ) );
scene.add( points );

Add event listeners and add points to particles after creating of renderer.

options.eventListeners = new Options.raycaster.EventListeners( camera, renderer, { options: options, scene: scene } );
options.eventListeners.addParticle( points );

For testing please move cursor over point. Cursor will be changing to 'pointer'.

You can see a dot lines from point to axes if you click over point.

You can customize the raycaster events. For example you can display an alert message if user has click over point.

points.userData.raycaster = {

	onMouseDown: function ( intersection ) {

		alert( 'You have clicked over point.' );
		Options.raycaster.onMouseDown( intersection, options );

	}

}

See Raycaster#EventListeners for more details.

Easier way for displaying points is using of MyPoints.

First, import MyPoints.

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

Now you can use MyPoints in your javascript code.

new MyPoints( [
	[],//first point. Zero position. White color.
	[ -0.5, 0.5, 0.5 ],//second point. White color.
], scene, { options: options } );

Please call MyPoints after creating of renderer and options.eventListeners if you want to use the pointsOptions.shaderMaterial = false key.

new MyPoints( [
	[],//first point. Zero position. White color.
	[ -0.5, 0.5, 0.5 ],//second point. White color.
], scene, {
	
	options: options,
	pointsOptions: { shaderMaterial: false, },
	
} );

Choose a point at which the camera is looking.

First, import Player.

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

See Player API for details.

Point of THREE.Points is camers target.

Please, add the cameraTarget key into arrayFuncs array and use Player.getPoints for get of the points array for creation of the THREE.Points.

const arrayFuncs = [
	new THREE.Vector3( 0.5, 0.5 ,0.5 ),//First point
	{

		vector: new THREE.Vector3( -0.5, -0.5 ,-0.5 ),
		cameraTarget: { camera: camera, },

	}//Second point
]
const points = new THREE.Points( new THREE.BufferGeometry().setFromPoints(
		Player.getPoints( arrayFuncs, { group: scene, } ),
		Player.getItemSize( arrayFuncs ) ),
	new THREE.PointsMaterial( {

		color: 0xffffff,
		size: 5,//0.05,
		sizeAttenuation: false,
		alphaTest: 0.5,

	} ) );

Define points.userData.player and call Player.selectPlayScene(...).

points.userData.player = { arrayFuncs: arrayFuncs, }
Player.selectPlayScene( scene, { options: options } );

ATTENTION!!! Call Player.selectPlayScene( scene, { options: options } ); after creation of the OrbitControls instance in the options.createOrbitControls( camera, renderer, scene ); line.

Now you can see the second point ( position is -0.5, -0.5 ,-0.5 ) in the center of the canvas. In other words, camera look at the second point.

Point of MyPoints is camera target.

Please remove cameraTarget key from second point of arrayFuncs

const arrayFuncs = [
	new THREE.Vector3( 0.5, 0.5 ,0.5 ),//First point
	{

		vector: new THREE.Vector3( -0.5, -0.5 ,-0.5 ),
		//cameraTarget: { camera: camera, },

	}//Second point
]

and add cameraTarget to second point of MyPoints

new MyPoints( [
	[],//first point. Zero position. White color.
	{

		vector: new THREE.Vector3( -0.5, 0.5, 0.5 ),
		cameraTarget: { camera: camera, },

	}//second point. White color.
], scene, { options: options } );

Please create MyPoints before Player.selectPlayScene( scene, { options: options } ); line if you want to use the pointsOptions.shaderMaterial = false key.

new MyPoints( [
	[],//first point. Zero position. White color.
	{

		vector: new THREE.Vector3( -0.5, 0.5, 0.5 ),
		cameraTarget: { camera: camera, },

	}//second point. White color.
], scene, {
	
	options: options,
	pointsOptions: { shaderMaterial: false, },
	
} );

Now you can see the second point ( position is -0.5, 0.5, 0.5 ) of MyPoints in the center of the canvas. In other words, camera look at the second point.

Graphical user interface for changing settings.

AxesHelper settings.

Import dat.gui.

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

Add AxesHelperGui into dat.gui for manual change settings of the AxesHelper.

Import AxesHelperGui.

import AxesHelperGui from './commonNodeJS/master/AxesHelper/AxesHelperGui.js';

Create AxesHelperGui instance after creating of AxesHelper instance.

AxesHelperGui( options );

Now you can see the "Axes Helper" folder in the dat.gui.

Select a point from the mesh.

Add guiSelectPoint into dat.gui for select a point from the mesh.

Move a group of meshes.

Sometimes you need to move a group of meshes for better visualization. Use MoveGroupGui for it.

Import MoveGroupGui.

import MoveGroupGui from './commonNodeJS/master/MoveGroupGui.js';

Create the MoveGroupGui instance.

new MoveGroupGui( scene, options );

Now you can see the 'Move Group' folder in the dat.gui. You can move, scale and rotate the scene. Unfortunately, you also move the axes. For resolving of the issue, create groupMove and move all your meshes from scene to groupMove.

const groupMove = new THREE.Group();
scene.add( groupMove );

Move groupMove instead of the scene. Replace scene to groupMove in the new MoveGroupGui.

new MoveGroupGui( groupMove, options );

Remove points from scene and add it into groupMove.

//scene.add( points );
groupMove.add( points );

Remove MyPoints from scene and add it into groupMove.

new MyPoints( [
	[],//first point. Zero position. White color.
	{

		vector: new THREE.Vector3( -0.5, 0.5, 0.5 ),
		cameraTarget: { camera: camera, },

	}//second point. White color.
], groupMove, { options: options } );

Example of your web page.

The following code is the result of this tutorial.

<!DOCTYPE html>

<html>
<head>
	<title>AxesHelper</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/AxesHelper" target="_blank" rel="noopener">AxesHelper</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 AxesHelper from './commonNodeJS/master/AxesHelper/AxesHelper.js';
		import MyPoints from './commonNodeJS/master/myPoints/myPoints.js';
		import Player from './commonNodeJS/master/player/player.js';
		import { dat } from './commonNodeJS/master/dat/dat.module.js';
		three.dat = dat;
		import AxesHelperGui from './commonNodeJS/master/AxesHelper/AxesHelperGui.js';
		import GuiSelectPoint from './commonNodeJS/master/guiSelectPoint/guiSelectPoint.js';
		import MoveGroupGui from './commonNodeJS/master/MoveGroupGui.js';

		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();

			const groupMove = new THREE.Group();
			scene.add( groupMove );

			const arrayFuncs = [
				new THREE.Vector3( 0.5, 0.5 ,0.5 ),//First point
				{

					vector: new THREE.Vector3( -0.5, -0.5 ,-0.5 ),
					//cameraTarget: { camera: camera, },

				}//Second point
			]
			const points = new THREE.Points( new THREE.BufferGeometry().setFromPoints(
					Player.getPoints( arrayFuncs, { group: scene, } ),
					Player.getItemSize( arrayFuncs ) ),
				new THREE.PointsMaterial( {

					color: 0xffffff,
					size: 5,//0.05,
					sizeAttenuation: false,
					alphaTest: 0.5,

				} ) );
			//scene.add( points );
			groupMove.add( points );
			points.userData.raycaster = {

				onMouseDown: function ( intersection ) {

					alert( 'You have clicked over point.' );
					Options.raycaster.onMouseDown( intersection, options );

				}

			}

			const options = new Options( {

				scales: {

					text: {

						//Please specify the textHeight if you want the changing of the text height is available in gui.
						//Default textHeight is 0.04
						textHeight: 0.04,

						//fov: camera.fov,

						//Precision of the scale marks is 3 digit.
						//Please specify the precision if you want the changing of the precision is available in gui.
						//Default precision is 4.
						precision: 3,

					},
					x: {

						name: 'time',
						marks: 5

					},
					y: {

						min: 0,

					},
					z: {}

				}

			} );

			new MoveGroupGui( groupMove, options );

			new GuiSelectPoint( options );
			options.guiSelectPoint.add();
			options.guiSelectPoint.addMesh( points );

			new AxesHelper( scene, options );
			AxesHelperGui( options );

			renderer = new THREE.WebGLRenderer( {

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

			} );

			options.eventListeners = new Options.raycaster.EventListeners( camera, renderer, { options: options, scene: scene } );
			options.eventListeners.addParticle( points );

			new MyPoints( [
				[],//first point. Zero position. White color.
				{

					vector: new THREE.Vector3( -0.5, 0.5, 0.5 ),
					cameraTarget: { camera: camera, },

				}//second point. White color.
			], groupMove, { options: options } );

			options.createOrbitControls( camera, renderer, scene );

			points.userData.player = { arrayFuncs: arrayFuncs, }
			Player.selectPlayScene( scene, { options: options } );

			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>

Enjoy my code :)

Home