Player.

I use Player in my three.js projects for 3D objects animation.

Content

Quick start.
Add trace line of moving of the point during playing.
Points color.
Move points position.
Create THREE.Points with THREE.ShaderMaterial.
Use MyPoints for create points.
Add player item into CanvasMenu.
Using dat.gui for manual change of the Player settings.
Set the camera to look at the point.
Time of the playing.
Use Raycaster for mouse picking (working out what objects in the 3d space the mouse is over).
Example of your web page.
Directory Contents.
Building your own Player.

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>Player</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/player" target="_blank" rel="noopener">Player</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 );

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

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

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

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

import Player from './commonNodeJS/master/player/build/player.module.min.js';

Now you can use Player in your javascript code.

Add Player after creating of the options and before creation of the renderer.

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

Currently your player is not doing anything. Please add a 3d object into canvas that you want to play with, for example Points. Suppose you want to move a point during playing.

const arrayFuncs = [
	new THREE.Vector3(
		new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
		new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
		0.5,//z
	),//First point
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];
const points = new THREE.Points( new THREE.BufferGeometry().setFromPoints(
		Player.getPoints( arrayFuncs,{ group: scene, options: options } ),
		Player.getItemSize( arrayFuncs ) ),
	new THREE.PointsMaterial( {

		color: 0xffffff,
		size: 0.2,

	} ) );
scene.add( points );

You can see, the X and Y values of the first point of the arrayFuncs is function of the t.

X is sin(t)

Y is cos(t).

t is current time of the playing.

Default start time t = 0, a = 1, b = 0.

Read about Function.

The Player.getPoints(...) in code above returns an array of the vectors for t = 0.

Define the points.userData.player object in your code for including of the points into Player. Include arrayFuncs into points.userData.player object if you want to move points during playing.

points.userData.player = {

	arrayFuncs: arrayFuncs,

}

Start playing.

options.player.play3DObject();

Attention! Please start playing after creation of all 3D objects and after creating of new Player instance, in current example after creating of the points.

Update your web page. Now you can see moving a point on the canvas.

Default, the playing ticks count is 10. You can change it. Also you can set your ticks per seconds and other setting. See settings.options.playerOptions parameter of the Player for details. Please edit options for it.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

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

		},

	}

);

Add trace line of moving of the point during playing.

Edit arrayFuncs

const arrayFuncs = [
	{

		vector: new THREE.Vector3(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
		),//First point
		trace: true,//Displays the trace of the first point movement.

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

Note. Please add options: options key in the settings parameter of the new Player for trace have effect. See above.

You can see, first value of the array is object with

{

vector: position of the point trace: true - displays the trace of the point movement.

}

Now you can see a trace line of the moving of the first point.

Points color.

In the THREE.PointsMaterial parameters of your points remove the color key and add vertexColors: true.

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

		vertexColors: true,
		size: 0.2,

	} ) );

In the first point of the arrayFuncs change vector from THREE.Vector3 to THREE.Vector4.

const arrayFuncs = [
	{

		vector: new THREE.Vector4(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
			new THREE.Color( "rgb( 0, 255, 0)" )//w is green color
		),//First point
		trace: true,//Displays the trace of the first point movement.

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

You can see the w coordinate of the THREE.Vector4 is green color.

Make the point color is function of the time.

Change the w coordinate of the first point to new Function( 't', 'return 1-2*t' ).

const arrayFuncs = [
	{

		vector: new THREE.Vector4(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
			new Function( 't', 'return 1-2*t' )//w
		),//First point
		trace: true,//Displays the trace of the first point movement.

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

w patameter of the new THREE.Vector4 of the vector key of the first point of the arrayFuncs is index of the color palette. Trace of the first point is circle.

First half of the trace is alternation of colors from white to red, then green and blue because default palette is ColorPicker.paletteIndexes.BGYW (blue, green, yellow, white) palette.

Last half of the trace is white because default range of the color palette from 0 to 1 (See Options.setW(options) method for details). But current range of the 1-2 * t function from 1 to -1 for default t range from 0 to 1. You can resolve this issue by change of the palette range. Replace w coordinate of the first point from new Function( 't', 'return 1-2*t' ) to an object as wrote below. See arrayFuncs parameter of the Player.getColors(...) for details.

const arrayFuncs = [
	{

		vector: new THREE.Vector4(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
			{

				func: new Function( 't', 'return 1-2*t' ),
				min: -1,
				max: 1,

			},//w
		),//First point
		trace: true,//Displays the trace of the first point movement.

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

Select a color palette.

Default color palette index is ColorPicker.paletteIndexes.BGYW. You can select another palette. For example ColorPicker.paletteIndexes.bidirectional palette. Add the palette key of the options for it.

First, import ColorPicker.

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

Then edit options.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

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

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

	}

);

Now the color of the first point is changing from green to dark and red during playing.

Also you can create your own custom palette.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

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

		},
		palette: new ColorPicker.palette( { palette: [

				{ percent: 0, r: 0xff, g: 255, b: 0xff, },
				{ percent: 10, r: 0, g: 0, b: 0, },
				{ percent: 20, r: 0xff, g: 0, b: 0x0, },
				{ percent: 30, r: 0x0, g: 255, b: 0x0, },
				{ percent: 40, r: 0x0, g: 0, b: 0xff, },
				{ percent: 80, r: 0x0, g: 0, b: 0xff, },
				{ percent: 90, r: 0xff, g: 255, b: 0xff, },

			]
			
		} ),

	}

);

Currently your player use same palette for all meshes. You can set individual palette for any mesh. Add palette key in the mesh.userData.player for it. For example ColorPicker.paletteIndexes.rainbow palette.

points.userData.player = {

	arrayFuncs: arrayFuncs,
	palette: new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.rainbow } ),

}

Move points position.

Add selectPlayScene key to the points.userData.player object.

points.userData.player = {

	arrayFuncs: arrayFuncs,
	selectPlayScene: function ( t ) {

		points.position.x = 8*t;

	}

}

t is current time.

Now all points in your canvas moving to the right.

Also you can scale and rotate any mesh on your canvas. For example.

points.rotation.z = - Math.PI * 2 * t;

Create THREE.Points with THREE.ShaderMaterial material.

Currently, it seems to you that the size of the first point changes during of the the playing because point moves near or far from camera. Sometimes you want to see the sizes of the points is not depend from distance to camera. To do it, please remove your old const points and use getShaderMaterialPoints for creating of new points as described in getShaderMaterialPoints API.

First, import getShaderMaterialPoints into your web page.

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

Please remove options.player.play3DObject(); line and include it into getShaderMaterialPoints parameters.

new getShaderMaterialPoints( scene, arrayFuncs,
	function ( points ) {

		scene.add( points );
		points.userData.player = {

			arrayFuncs: arrayFuncs,
			selectPlayScene: function ( t ) {

				points.position.x = 8 * t;
				points.rotation.z = - Math.PI * 2 * t;

			}

		}
		options.player.play3DObject();

	},
	{
	
		options: options,

	} );

Use MyPoints for create points.

Simplest way of creations of the points is using of the MyPoints. Please remove your old const points and getShaderMaterialPoints and use MyPoints for creating of new points. Import MyPoints into your web page for it.

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:

new MyPoints( arrayFuncs, scene, {

	Player: Player,
	options: options,

} );
options.player.play3DObject();

Now you can see, first point is moving and changing color.

Currently all MyPoints settings is default. You can set your own setting for MyPoints. For example set points size to 15 and move all points to right during playing.

Add point key into options above.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

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

		},
		point: { size: 15 },

	}

);

Edit MyPoints.

new MyPoints( arrayFuncs, scene, {

	options: options,
	pointsOptions: {

		position: new THREE.Vector3( new Function( 't', 'return 8 * t' ), 0, 0 ),
		rotation: new THREE.Vector3( 0, 0, new Function( 't', 'return - Math.PI * 2 * t' ) ),

	}

} );

If you want to see the sizes of the points is depend from distance to camera, please add shaderMaterial: false into pointsOptions of the MyPoints for it.

new MyPoints( arrayFuncs, scene, {

	options: options,
	pointsOptions: {

		position: new THREE.Vector3( new Function( 't', 'return 8 * t' ), 0, 0 ),
		rotation: new THREE.Vector3( 0, 0, new Function( 't', 'return - Math.PI * 2 * t' ) ),
		shaderMaterial: false,

	}

} );

ATTENTION!!! Now positions of the points of the first ticks is not valid because you have ran player before creating of the Points. For resolving of the problem please remove options.player.play3DObject(); and include it inside of the MyPoints.

new MyPoints( arrayFuncs, scene, {

	options: options,
	pointsOptions: {

		position: new THREE.Vector3( new Function( 't', 'return 8 * t' ), 0, 0 ),
		rotation: new THREE.Vector3( 0, 0, new Function( 't', 'return - Math.PI * 2 * t' ) ),
		shaderMaterial: false,
		onReady: function ( points ) {

			options.player.play3DObject();

		}

	}

} );

Add player item into CanvasMenu.

import CanvasMenu from './commonNodeJS/master/canvasMenu/canvasMenu.js';

Create CanvasMenu. Attention!!! Please create CanvasMenu after creating of the render but before renderer.setSize(...)

new CanvasMenu( renderer, {

	options: options,

} );

Please move mouse over canvas. Now you can see a player's menu items on the bottom of the canvas.

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

Import dat.gui.

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

And call player.gui() after creating of new Player instance.

options.player.gui();

You can see the "Player" folder in the upper right corner of the canvas.

Add player control buttons to the dat.gui.

new options.player.PlayController();

You can see the player control in the upper right corner of the canvas.

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

First, import CameraGui.

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

Add CameraGui after new Player.

new CameraGui( camera, options );

You can see the "Camera" folder in the upper right corner of the canvas.

A dat.gui based graphical user interface for select a point from the mesh.

Import GuiSelectPoint.

import GuiSelectPoint from './commonNodeJS/master/guiSelectPoint/guiSelectPoint.js';

Create instance of the GuiSelectPoint.

Note! Create instance of the GuiSelectPoint before all meshes, from which user can to select point and after creating of new Player.

new GuiSelectPoint( options );
if ( options.guiSelectPoint ) options.guiSelectPoint.add();

You can see the "Meshes" folder in the upper right corner of the canvas.

If you use const points = new THREE.Points for create points, please add

options.guiSelectPoint.addMesh( points );

line after scene.add( points ); and after creating of new GuiSelectPoint instance.

If you use getShaderMaterialPoints for create points, please add options.guiSelectPoint.addMesh( points ); line into onReady callback function of getShaderMaterialPoints.

new getShaderMaterialPoints( scene, arrayFuncs,
	function ( points ) {

		scene.add( points );
		points.userData.player = {

			arrayFuncs: arrayFuncs,
			selectPlayScene: function ( t ) {

				points.position.x = 8 * t;
				points.rotation.z = - Math.PI * 2 * t;

			}

		}
		options.player.play3DObject();
		options.guiSelectPoint.addMesh( points );

	},
	{
	
		options: options,

	} );

If you are using MyPoints, do nothing to add points to guiSelectPoint.

Set the camera to look at the point.

Now you can see, all points moves and hides on the right border of the canvas during playing. For resolving of issue you can:

Select the point at which the camera is looking during playing from your program code. Please, add the cameraTarget key into arrayFuncs array for it.

const arrayFuncs = [
	{

		vector: new THREE.Vector4(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
			{

				func: new Function( 't', 'return 1-2*t' ),
				min: -1,
				max: 1,

			},//w
		),//First point
		trace: true,//Displays the trace of the first point movement.

		//Set the camera to look at the first point.
		cameraTarget: { camera: camera, },

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

ATTENTION!!! Only one point can have cameraTarget key! You will receive the

Player.getPoints: duplicate cameraTarget

console warning if two or more points have cameraTarget key. Then only last point with cameraTarget key will be have an effect.

Currently uses default value of the distance from camera to selected point. You can change distance from camera to selected point from your program code. Also you can rotate camera around the point. Please add cameraTarget key into options for it.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

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

		},
		point: { size: 15 },
		cameraTarget: {

	
			//boLook: false,//camera do not look at a selected point during playing.
				//User can change this key if you add the CameraGui into dat.gui
			camera: camera,
			rotation: {

				//rotate camera to 180 degrees
				//angle: Math.PI,

				//Camera rotation is function of the time.
				angle: new Function( 't', 'return 2*t' ),

				/*
				angle: [
					0,//rotation is 0 degrees for time is 0
					Math.PI / 2//rotation is 90 degrees for time is max time
				],
				*/
				/*
				angle: [
					{ t: 0, v: 0 },//rotation is 0 degrees for time is 0
					{ t: 1, v: Math.PI / 2 },//rotation is 90 degrees for time is 1
					{ t: 10, v: Math.PI / 2 },//rotation is 90 degrees for time is 10
					{ t: 11, v: 0 }//rotation is 0 degrees for time is 11 and great.
				],
				*/
				//axis: new THREE.Vector3( 1, 0, 0 ),//Rotate around x axis

			},
			//distanceToCamera: new THREE.Vector3( 0, 0, 5 ),
			distanceToCamera: new THREE.Vector3( 0, 0, new Function( 't', 'return 2 + 4 * t' ) ),
			/*
			distanceToCamera: new THREE.Vector3( 0, 0, [
				{ t: 0, v: 5 },//distance to camera is 5 for time is 0
				{ t: 1, v: 2 },//distance to camera is 2 for time is 1
				{ t: 10, v: 2 },//distance to camera is 2 for time is 10
				{ t: 11, v: 5 }//distance to camera is 5 for time is 11 and great.
			] ),
			*/

		}

	}

);

You can set individual setting for selected point. Please add rotation, distanceToCamera, boLook keys into cameraTarget object for selected point

const arrayFuncs = [
	{

		vector: new THREE.Vector4(
			new Function( 't', 'a', 'b', 'return Math.sin(t*a*2*Math.PI)*0.5+b' ),//x
			new Function( 't', 'a', 'b', 'return Math.cos(t*a*2*Math.PI)*0.5-b' ),//y
			0.5,//z
			{

				func: new Function( 't', 'return 1-2*t' ),
				min: -1,
				max: 1,

			},//w
		),//First point
		trace: true,//Displays the trace of the first point movement.

		//Set the camera to look at the first point.
		cameraTarget: {

			camera: camera,
			rotation: {

				angle: 0,
				//angle: new Function( 't', 'return 5*t' ),
				//angle: [0, Math.PI / 2],
				//angle: [{ t: 0, v: 0 }, { t: 1, v: Math.PI / 2 }, { t: 10, v: Math.PI / 2 },  { t: 11, v: 0 }],
				//axis: new THREE.Vector3( 1, 0, 0 ),//Rotate around x axis

			},
			distanceToCamera: new THREE.Vector3( 0, 0, [
				{ t: 0, v: 9 },//distance to camera is 9 for time is 0
				{ t: 1, v: 2 },//distance to camera is 2 for time is 1
			] ),

		},

	},
	new THREE.Vector3( -0.5, -0.5, -0.5 ),//Second point
];

Individual setting for selected point is more priority before camera settings.

The user can select the point at which the camera is looking during playing.

If you do not setted the cameraTarget key into arrayFuncs and did not create a CameraGui instance, please add cameraTarget for the Player.

new Player( scene, {

	options: options,
	cameraTarget: { camera: camera, },

} );

Or add cameraTarget key for creating of guiSelectPoint instance.

new GuiSelectPoint( options, {

	cameraTarget: { camera: camera, },

} );

Please open the "Meshes" folder and select a mesh. Now you can see the "Points" folder.

Please open the "Points" folder and select a point of the mesh. Now you can see the "Look" checkbox.

Selected point will be moves to the center of the canvas if you checked the "Look" checkbox. In another words, camera will be look at selected point.

Time of the playing.

Default time of the playing limited between 0 and 1. You can set another time limit. Please add min and max keys into playerOptions key of the new Options for it

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

			min: 0,
			max: 2,
			marks: 100,//Ticks count of the playing.
			interval: 25,//Ticks per seconds.

		},
		point: { size: 15 },
		cameraTarget: {

	
			//boLook: false,//camera do not look at a selected point during playing.
				//User can change this key if you add the CameraGui into dat.gui
			camera: camera,
			rotation: {

				//rotate camera to 180 degrees
				//angle: Math.PI,

				//Camera rotation is function of the time.
				angle: new Function( 't', 'return 2*t' ),

				/*
				angle: [
					0,//rotation is 0 degrees for time is 0
					Math.PI / 2//rotation is 90 degrees for time is max time
				],
				*/
				/*
				angle: [
					{ t: 0, v: 0 },//rotation is 0 degrees for time is 0
					{ t: 1, v: Math.PI / 2 },//rotation is 90 degrees for time is 1
					{ t: 10, v: Math.PI / 2 },//rotation is 90 degrees for time is 10
					{ t: 11, v: 0 }//rotation is 0 degrees for time is 11 and great.
				],
				*/
				//axis: new THREE.Vector3( 1, 0, 0 ),//Rotate around x axis

			},
			//distanceToCamera: new THREE.Vector3( 0, 0, 5 ),
			distanceToCamera: new THREE.Vector3( 0, 0, new Function( 't', 'return 2 + 4 * t' ) ),
			/*
			distanceToCamera: new THREE.Vector3( 0, 0, [
				{ t: 0, v: 5 },//distance to camera is 5 for time is 0
				{ t: 1, v: 2 },//distance to camera is 2 for time is 1
				{ t: 10, v: 2 },//distance to camera is 2 for time is 10
				{ t: 11, v: 5 }//distance to camera is 5 for time is 11 and great.
			] ),
			*/

		}

	}

);

Attention!!! Please press the Default button in the Player/Time folder if you have set the dat.cookie key is not false in the options parameter of the new Options(...) and want your new Options settings to have an effect.

You can infinity play. Please edit max: Infinity key in playerOptions key of the new Options for it.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

			min: 0,
			max: Infinity,
			marks: 100,//Ticks count of the playing.
			interval: 25,//Ticks per seconds.

		},
		point: { size: 15 },
		cameraTarget: {

	
			//boLook: false,//camera do not look at a selected point during playing.
				//User can change this key if you add the CameraGui into dat.gui
			camera: camera,
			rotation: {

				//rotate camera to 180 degrees
				//angle: Math.PI,

				//Camera rotation is function of the time.
				angle: new Function( 't', 'return 2*t' ),

				/*
				angle: [
					0,//rotation is 0 degrees for time is 0
					Math.PI / 2//rotation is 90 degrees for time is max time
				],
				*/
				/*
				angle: [
					{ t: 0, v: 0 },//rotation is 0 degrees for time is 0
					{ t: 1, v: Math.PI / 2 },//rotation is 90 degrees for time is 1
					{ t: 10, v: Math.PI / 2 },//rotation is 90 degrees for time is 10
					{ t: 11, v: 0 }//rotation is 0 degrees for time is 11 and great.
				],
				*/
				//axis: new THREE.Vector3( 1, 0, 0 ),//Rotate around x axis

			},
			//distanceToCamera: new THREE.Vector3( 0, 0, 5 ),
			distanceToCamera: new THREE.Vector3( 0, 0, new Function( 't', 'return 2 + 4 * t' ) ),
			/*
			distanceToCamera: new THREE.Vector3( 0, 0, [
				{ t: 0, v: 5 },//distance to camera is 5 for time is 0
				{ t: 1, v: 2 },//distance to camera is 2 for time is 1
				{ t: 10, v: 2 },//distance to camera is 2 for time is 10
				{ t: 11, v: 5 }//distance to camera is 5 for time is 11 and great.
			] ),
			*/

		}

	}

);

Press the Default button again.

Currently, the default playback step is 0.1. You can set another step. Please add dt key into playerOptions key of the new Options for it.

const options = new Options(

	{

		playerOptions: {//create a Player instance. 3D objects animation.

			min: 0,
			max: Infinity,
			dt: 0.01,//Have effect for max: Infinity
			marks: 100,//Ticks count of the playing.
			interval: 25,//Ticks per seconds.

		},
		point: { size: 15 },
		cameraTarget: {

	
			//boLook: false,//camera do not look at a selected point during playing.
				//User can change this key if you add the CameraGui into dat.gui
			camera: camera,
			rotation: {

				//rotate camera to 180 degrees
				//angle: Math.PI,

				//Camera rotation is function of the time.
				angle: new Function( 't', 'return 2*t' ),

				/*
				angle: [
					0,//rotation is 0 degrees for time is 0
					Math.PI / 2//rotation is 90 degrees for time is max time
				],
				*/
				/*
				angle: [
					{ t: 0, v: 0 },//rotation is 0 degrees for time is 0
					{ t: 1, v: Math.PI / 2 },//rotation is 90 degrees for time is 1
					{ t: 10, v: Math.PI / 2 },//rotation is 90 degrees for time is 10
					{ t: 11, v: 0 }//rotation is 0 degrees for time is 11 and great.
				],
				*/
				//axis: new THREE.Vector3( 1, 0, 0 ),//Rotate around x axis

			},
			//distanceToCamera: new THREE.Vector3( 0, 0, 5 ),
			distanceToCamera: new THREE.Vector3( 0, 0, new Function( 't', 'return 2 + 4 * t' ) ),
			/*
			distanceToCamera: new THREE.Vector3( 0, 0, [
				{ t: 0, v: 5 },//distance to camera is 5 for time is 0
				{ t: 1, v: 2 },//distance to camera is 2 for time is 1
				{ t: 10, v: 2 },//distance to camera is 2 for time is 10
				{ t: 11, v: 5 }//distance to camera is 5 for time is 11 and great.
			] ),
			*/

		}

	}

);