|
<!DOCTYPE html> |
|
|
|
|
|
|
|
<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() { |
|
|
|
|
|
light = new THREE.PointLight(0xffffff, 0.9, 0); |
|
light.position.set(0, 160, 40); |
|
scene.add(light); |
|
|
|
|
|
var size = 200, |
|
step = 20; |
|
|
|
|
|
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); |
|
|
|
|
|
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() { |
|
|
|
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); |
|
|
|
|
|
} |
|
|
|
function loadBVHFile(bvhURL, cname, jm, bm, scale) { |
|
var c2 = new BVHCharacter(cname, jm, bm, makeJointGeometry_Dode, makeBoneGeometry_Cylinder2); |
|
|
|
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.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.gammaInput = true; |
|
renderer.gammaOutput = true; |
|
renderer.setPixelRatio(window.devicePixelRatio); |
|
|
|
renderer.setClearColor(0xffffff, 1); |
|
|
|
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
} |
|
|
|
function animate() { |
|
|
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
|
characters.forEach(function(c) { |
|
|
|
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++; |
|
|
|
|
|
|
|
} |
|
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> |
|
|
