thanks to H-Liu1997 ❤

bb82d2f verified about 2 years ago

8.4 kB

	<!DOCTYPE html>
	<!-- GrooveNet Player - V 0.3
	By Omid Alemi
	-->
	<html lang="en">

	<head>
	<title>BVH Player</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>

	</style>
	<link rel="stylesheet" href="styles/pace.css"></link>

	<script src="libs/pace.min.js"></script>
	<script src="libs/math.min.js"></script>
	<script src="libs/jquery.min.js"></script>
	<script src="libs/threejs/three.min.js"></script>
	<script src="libs/threejs/OrbitControls.js"></script>
	<script src="libs/papaparse.min.js"></script>

	<script src="libs/mocapjs.js"></script>
	<script src="js/skeletonFactory.js"></script>
	</head>

	<body>
	<script type="text/javascript">
	var characters = [];
	var playing = false;


	$(document).on("keypress", function(e) {
	if (e.charCode == 32)
	playing = !playing;

	characters.forEach(function(c) {
	c.playing = playing;

	if (playing)
	c.animStartTimeRef = Date.now();
	else
	c.animOffset = c.animIndex;
	});

	});

	$(window).on("resize", function(e) {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

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

	var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = decodeURIComponent(window.location.search.substring(1)),
	sURLVariables = sPageURL.split('&'),
	sParameterName,
	i;

	for (i = 0; i < sURLVariables.length; i++) {
	sParameterName = sURLVariables[i].split('=');
	if (sParameterName[0] === sParam) {
	return sParameterName[1] === undefined ? true : sParameterName[1];
	}
	}
	};
	</script>

	<script>
	var scene, camera, renderer;
	var geometry, material, mesh;
	var played_count = 0;

	function set_the_scene3() {

	// Add the light
	light = new THREE.PointLight(0xffffff, 0.9, 0);
	light.position.set(0, 160, 40);
	scene.add(light);

	// Create a grid for the floor
	var size = 200,
	step = 20;

	// Draw the plane
	var planeGeometry = new THREE.PlaneGeometry(size * 2, size * 2);
	var planeMaterial = new THREE.MeshPhongMaterial({
	color: 0x444444,
	emissive: 0x000000,
	specular: 0x111111,
	side: THREE.DoubleSide,
	transparent: true,
	opacity: 0.6
	});
	var plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.position.set(0, 0, 0);
	plane.rotation.set(math.pi / 2, 0, 0);
	scene.add(plane);

	//Draw the lines
	var lineGeometry = new THREE.Geometry();
	var lineMaterial = new THREE.LineBasicMaterial({
	color: 0x555555,
	linewidth: 1.2
	});
	for (var i = -size; i <= size; i += step) {
	lineGeometry.vertices.push(new THREE.Vector3(-size, -0.04, i));
	lineGeometry.vertices.push(new THREE.Vector3(size, -0.04, i));
	lineGeometry.vertices.push(new THREE.Vector3(i, -0.04, -size));
	lineGeometry.vertices.push(new THREE.Vector3(i, -0.04, size));
	}

	var line = new THREE.LineSegments(lineGeometry, lineMaterial);
	scene.add(line);
	}

	function add_basic_lights() {
	// Add the light
	var light = new THREE.HemisphereLight(0xffffff, 0x000000, 0.8);
	scene.add(light);
	}

	function add_floor_theo() {
	var textureLoader = new THREE.TextureLoader();

	var texture = textureLoader.load('theo_floor1.jpg', function(tt) {
	});

	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	texture.repeat = new THREE.Vector2(1,1.66);


	var material = new THREE.MeshPhongMaterial({
	color: 0xffffff,
	specular: 0xffffff,
	shininess: 100,
	map: texture,

	});
	var geometry = new THREE.CubeGeometry(300, 300, 5);

	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.y = -2;
	mesh.rotation.x = -Math.PI / 2;
	scene.add(mesh);
	}

	function init(cz) {
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 4000);
	camera.position.set(0, 80, 0);
	camera.position.z = cz;
	scene.add(camera);

	// set_the_scene3();
	}

	function loadBVHFile(bvhURL, cname, jm, bm, scale) {
	var c2 = new BVHCharacter(cname, jm, bm, makeJointGeometry_Dode, makeBoneGeometry_Cylinder2);
	// c2.setOriginPosition(0, 0, 0);
	c2.skelScale = scale;
	c2.loadFromURL(bvhURL, function() {
	scene.add(c2.skeleton);
	});

	characters.push(c2);
	}

	function loadPosFile(csvURL, cname, jm, bm, scale, fr) {
	var c2 = new C3DCharacter(cname, markermaterial, makeJointGeometry_Sphere2);
	// c2.setOriginPosition(0, 0, 0);
	c2.scale = scale;
	c2.frameTime = fr;
	c2.loadFromURL(csvURL, function() {});

	characters.push(c2);
	}

	function initRenderer() {
	renderer = new THREE.WebGLRenderer({
	antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	//renderer.setSize(600, 500);
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setPixelRatio(window.devicePixelRatio);
	// renderer.setClearColor(0xdddddd, 1);
	renderer.setClearColor(0xffffff, 1);


	document.body.appendChild(renderer.domElement);

	controls = new THREE.OrbitControls(camera, renderer.domElement);
	}

	function animate() {
	// if (!playing)
	// return;

	requestAnimationFrame(animate);

	characters.forEach(function(c) {
	// console.log(c.playing);
	if (1 && c.ready) {
	if (c.playing) {
	c.animIndex = c.animOffset + Math.floor((Date.now() - c.animStartTimeRef) / c.frameTime / 1000);

	if (c.animIndex >= c.frameCount) {
	c.animOffset = 0;
	c.animStartTimeRef = Date.now();
	c.animIndex = 0;
	played_count++;
	// if (played_count> 1)
	// c.playing = false;

	}
	c.animFrame(c.animIndex);
	}
	}
	});

	renderer.render(scene, camera);
	}


	$(document).ready(function () {
	var dataURL = getUrlParameter('data_url');
	var cz = getUrlParameter('cz');
	var scale = getUrlParameter('scale');
	var frameTime = getUrlParameter('frame_time');

	if (cz === undefined)
	cz = 550;

	if (scale === undefined)
	scale = 1.0;

	if (frameTime === undefined)
	frameTime = 1/120;

	init(cz);
	add_basic_lights();
	add_floor_theo();
	initRenderer();

	if (dataURL !== undefined) {
	console.log("Loading " + dataURL);

	if (dataURL.endsWith('.bvh'))
	loadBVHFile(dataURL, 'Fig', jm_a, bm_a, scale);
	else if (dataURL.endsWith('.csv'))
	loadPosFile(dataURL, 'Fig', jm_a, bm_a, scale, frameTime);
	else
	console.error('Unsupport file.');
	}



	animate();
	});


	</script>
	</body>

	</html>