lisajamhoury/webgl_loader_fbx_ktron.html

## webgl_loader_fbx_ktron.html
<!--
TO DO
http://localhost:8000/threejs/three.js/examples/#webgl_loader_fbx_ktron
https://github.com/kinectron/kinectron/blob/midterm/examples/threejs_examples/allJoints/sketch.js


http://localhost:8000/threejs/three.js/examples/#webgl_animation_skinning_blending
 -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - FBX loader Ktron</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
		<script src="./models/ktron/recorded_skeleton.json"></script>
	</head>

	<body>
		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
			Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';

			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { FBXLoader } from './jsm/loaders/FBXLoader.js';

			var container, stats, controls;
			var camera, scene, renderer, light;


			var clock = new THREE.Clock();

			var mixer;

			var joints = [];
			var lowestY = 0;
			var up = 321;
			var right = 300;
			var bodyScale = 300;

			// recorded data variables
			let sentTime = Date.now();
			let currentFrame = 0;
			let recorded_skeleton;
			// let recorded_data_file = "./recorded_skeleton.json";

			init();
			animate();

			function bigUPP() {

				console.log('upp');
				console.log(up);

				up += 10;

			}

			function init() {


				recorded_skeleton = (function() {
				        var json = null;
				        $.ajax({
				            'async': false,
				            'global': false,
				            'url': "./models/ktron/recorded_skeleton.json",
				            'dataType': "json",
				            'success': function (data) {
				                json = data;
				            }
				        });
				        return json;
				    })();

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 100, 200, 300 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xa0a0a0 );
				// scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
				light.position.set( 0, 200, 0 );
				scene.add( light );

				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 200, 100 );
				light.castShadow = true;
				light.shadow.camera.top = 180;
				light.shadow.camera.bottom = - 100;
				light.shadow.camera.left = - 120;
				light.shadow.camera.right = 120;
				scene.add( light );

				// scene.add( new CameraHelper( light.shadow.camera ) );

				// ground
				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
				scene.add( mesh );

				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
				grid.material.opacity = 0.2;
				grid.material.transparent = true;
				scene.add( grid );

				// model
				var loader = new FBXLoader();
				loader.load( 'models/fbx/sporty_granny.fbx', function ( object ) {

					// mixer = new THREE.AnimationMixer( object );

					// var action = mixer.clipAction( object.animations[ 0 ] );
					// action.play();

					object.traverse( function ( child ) {

						if ( child.isMesh ) {

							child.castShadow = true;
							child.receiveShadow = true;

						}

					} );


					var skeleton = new THREE.SkeletonHelper( object );
					skeleton.visible = true;
					scene.add( skeleton );

					// 91 bones

					console.log('object ', object);
					console.log('skeleton', skeleton);

					scene.add( object );


					//


				} );


				// Create cubes for joints


				// var geometry, texture, mesh;

				for (var i = 0; i < 25; i++) {
				  // var material1 = new THREE.MeshPhongMaterial( { color: 0xff0000 }  );
				  //var material = new THREE.MeshBasicMaterial({ color: 0x3b0160 });

				  var material1 = new THREE.MeshPhongMaterial( {
				  	color: 0xff0000,
				  	flatShading: true,
				  	vertexColors: THREE.VertexColors,
				  	shininess: 0
				  } );

				  material1.color.set( 0xff0000 );
				  var geometry1 = new THREE.BoxGeometry( 15, 15, 15 );
				  geometry1.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );
				  var mesh1 = new THREE.Mesh( geometry1, material1 );
				  joints.push( mesh1 );
				  scene.add( mesh1 );
				}

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.shadowMap.enabled = true;
				container.appendChild( renderer.domElement );

				controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 100, 0 );
				controls.update();

				window.addEventListener( 'resize', onWindowResize, false );
				// window.addEventListener("keydown", bigUPP);

				// stats
				stats = new Stats();
				container.appendChild( stats.dom );

			}

			function onWindowResize() {

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

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

			}

			function loopRecordedData() {
			  // console.log("hi");
			  // send data every 20 seconds
			  if (Date.now() > sentTime + 20) {
			    bodyTracked(recorded_skeleton[currentFrame])
			    sentTime = Date.now();

			    if (currentFrame < Object.keys(recorded_skeleton).length-1) {
			      currentFrame++;
			    } else {
			      currentFrame = 0;
			    }
			  }

			}

			function bodyTracked(data) {
			  // background(0, 20);

			  // let hands = [];


			  for (var j = 0; j < joints.length; j++ ) {
			    joints[j].position.x = data.joints[j].cameraX * bodyScale + right;
			    joints[j].position.y = data.joints[j].cameraY * bodyScale + up;
			    joints[j].position.z = data.joints[j].cameraZ * -bodyScale;
			    // joints[j].rotation.x = data.joints[j].orientationX;
			    // joints[j].rotation.y = data.joints[j].orientationY;
			    // joints[j].rotation.z = data.joints[j].orientationZ;


			  }

			  if (joints[15].position.y < lowestY) {
			  	lowestY = joints[15].position.y;
			  	console.log(lowestY);
			  }

			}


			function animate() {

				requestAnimationFrame( animate );

				loopRecordedData();

				var delta = clock.getDelta();

				if ( mixer ) mixer.update( delta );

				renderer.render( scene, camera );

				stats.update();

			}

		</script>

	</body>
</html>
	<!--
	TO DO
	http://localhost:8000/threejs/three.js/examples/#webgl_loader_fbx_ktron
	https://github.com/kinectron/kinectron/blob/midterm/examples/threejs_examples/allJoints/sketch.js


	http://localhost:8000/threejs/three.js/examples/#webgl_animation_skinning_blending
	-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js webgl - FBX loader Ktron</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="./models/ktron/recorded_skeleton.json"></script>
	</head>

	<body>
	<div id="info">
	<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
	Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
	</div>

	<script type="module">

	import * as THREE from '../build/three.module.js';

	import Stats from './jsm/libs/stats.module.js';

	import { OrbitControls } from './jsm/controls/OrbitControls.js';
	import { FBXLoader } from './jsm/loaders/FBXLoader.js';

	var container, stats, controls;
	var camera, scene, renderer, light;


	var clock = new THREE.Clock();

	var mixer;

	var joints = [];
	var lowestY = 0;
	var up = 321;
	var right = 300;
	var bodyScale = 300;

	// recorded data variables
	let sentTime = Date.now();
	let currentFrame = 0;
	let recorded_skeleton;
	// let recorded_data_file = "./recorded_skeleton.json";

	init();
	animate();

	function bigUPP() {

	console.log('upp');
	console.log(up);

	up += 10;

	}

	function init() {



	recorded_skeleton = (function() {
	var json = null;
	$.ajax({
	'async': false,
	'global': false,
	'url': "./models/ktron/recorded_skeleton.json",
	'dataType': "json",
	'success': function (data) {
	json = data;
	}
	});
	return json;
	})();

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 100, 200, 300 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xa0a0a0 );
	// scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

	light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
	light.position.set( 0, 200, 0 );
	scene.add( light );

	light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 200, 100 );
	light.castShadow = true;
	light.shadow.camera.top = 180;
	light.shadow.camera.bottom = - 100;
	light.shadow.camera.left = - 120;
	light.shadow.camera.right = 120;
	scene.add( light );

	// scene.add( new CameraHelper( light.shadow.camera ) );

	// ground
	var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
	mesh.rotation.x = - Math.PI / 2;
	mesh.receiveShadow = true;
	scene.add( mesh );

	var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
	grid.material.opacity = 0.2;
	grid.material.transparent = true;
	scene.add( grid );

	// model
	var loader = new FBXLoader();
	loader.load( 'models/fbx/sporty_granny.fbx', function ( object ) {

	// mixer = new THREE.AnimationMixer( object );

	// var action = mixer.clipAction( object.animations[ 0 ] );
	// action.play();

	object.traverse( function ( child ) {

	if ( child.isMesh ) {

	child.castShadow = true;
	child.receiveShadow = true;

	}

	} );




	var skeleton = new THREE.SkeletonHelper( object );
	skeleton.visible = true;
	scene.add( skeleton );

	// 91 bones

	console.log('object ', object);
	console.log('skeleton', skeleton);

	scene.add( object );


	//



	} );




	// Create cubes for joints


	// var geometry, texture, mesh;

	for (var i = 0; i < 25; i++) {
	// var material1 = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
	//var material = new THREE.MeshBasicMaterial({ color: 0x3b0160 });

	var material1 = new THREE.MeshPhongMaterial( {
	color: 0xff0000,
	flatShading: true,
	vertexColors: THREE.VertexColors,
	shininess: 0
	} );

	material1.color.set( 0xff0000 );
	var geometry1 = new THREE.BoxGeometry( 15, 15, 15 );
	geometry1.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );
	var mesh1 = new THREE.Mesh( geometry1, material1 );
	joints.push( mesh1 );
	scene.add( mesh1 );
	}

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.shadowMap.enabled = true;
	container.appendChild( renderer.domElement );

	controls = new OrbitControls( camera, renderer.domElement );
	controls.target.set( 0, 100, 0 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize, false );
	// window.addEventListener("keydown", bigUPP);

	// stats
	stats = new Stats();
	container.appendChild( stats.dom );

	}

	function onWindowResize() {

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

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

	}

	function loopRecordedData() {
	// console.log("hi");
	// send data every 20 seconds
	if (Date.now() > sentTime + 20) {
	bodyTracked(recorded_skeleton[currentFrame])
	sentTime = Date.now();

	if (currentFrame < Object.keys(recorded_skeleton).length-1) {
	currentFrame++;
	} else {
	currentFrame = 0;
	}
	}

	}

	function bodyTracked(data) {
	// background(0, 20);

	// let hands = [];



	for (var j = 0; j < joints.length; j++ ) {
	joints[j].position.x = data.joints[j].cameraX * bodyScale + right;
	joints[j].position.y = data.joints[j].cameraY * bodyScale + up;
	joints[j].position.z = data.joints[j].cameraZ * -bodyScale;
	// joints[j].rotation.x = data.joints[j].orientationX;
	// joints[j].rotation.y = data.joints[j].orientationY;
	// joints[j].rotation.z = data.joints[j].orientationZ;


	}

	if (joints[15].position.y < lowestY) {
	lowestY = joints[15].position.y;
	console.log(lowestY);
	}

	}



	function animate() {

	requestAnimationFrame( animate );

	loopRecordedData();

	var delta = clock.getDelta();

	if ( mixer ) mixer.update( delta );

	renderer.render( scene, camera );

	stats.update();

	}

	</script>

	</body>
	</html>