-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
93 lines (73 loc) · 3.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="JS-libs/three.min.js"></script>
<script type="text/javascript" src="JS-libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on("ready", function (e)
{
var WIDTH = 400,
HEIGHT = 300;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
scene.add(camera);
camera.position.z = 2.5;
camera.position.y = 0.8;
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
loader = new THREE.JSONLoader();
loader.load('animations.js',function jsonReady( geometry )
{
// ATENTION: the morphTargets property must be set on the material
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({morphTargets : true}) );
scene.add( mesh );
var animationDuration = 5;
var framesPerSecond = 30;
var targetAnimationFrame = 19;
var interval = setInterval (function ()
{
// Animating by interpolation towards frame 19
// Obs: frames from 2 to 18 are not used, but could be by changing targetAnimationFrame
mesh.morphTargetInfluences[targetAnimationFrame] += 1 / (animationDuration * framesPerSecond);
renderer.render(scene, camera);
if (mesh.morphTargetInfluences[targetAnimationFrame] >= 1)
{
clearInterval (interval);
}
}, 1000 / framesPerSecond);
renderer.render(scene, camera);
});
});
</script>
</head>
<body>
<h1>Morph animation example with three.js</h1>
<h3>Authors: Fabio Picchi and Leonardo Leite</h3>
<h3>License: <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL v3</a></h3>
<div id="container" style="width:400px; height:300px;"></div>
<h3>Model preparation</h3>
<ul>
<li>The model was initially made and prepared using MakeHuman.</li>
<li>In MakeHuman we exported the model to the collada format.</li>
<li>In Blender we imported the collada model.</li>
<li>In Blender we created two key frames, one with the initial pose, and another one with a different pose.</li>
<li>The pose change was achieved by armature manipulation.</li>
<li>These two key frames generate an animation in the frames between them.</li>
<li>In Blender we exported the model to the json format (used in three.js).</li>
<li>The json model has each animation frame stored in the morphTargets array.</li>
</ul>
</body>