Spaces:
Running
on
Zero
Running
on
Zero
| <!-- 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> | |