-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathBabylon-Demo.html
141 lines (104 loc) · 4.45 KB
/
Babylon-Demo.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon - Basic scene</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<canvas id="renderCanvas"></canvas>
<script src="babylon.js"></script>
<script src="gl-matrix.js"></script>
<script src="flatbuffers.js"></script>
<script src="CreatureFlatData_generated.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureBabylonRenderer.js"></script>
<script>
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
// Artwork by: Katarzyna Zalecka [http://kasia88.deviantart.com], Attribution-ShareAlike 3.0 Unported
// Download Asset Files here: http://www.kestrelmoon.com/creaturedocs/Animation_Samples_And_Examples/Samples_And_Videos.html
xobj.open('GET', 'iceDemonExport_character_data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
// callback(xobj.responseText);
var response = xobj.responseText;
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
//document.write("Loaded JSON file: ");
var new_creature = new Creature(actual_JSON, false);
var new_animation_1 = new CreatureAnimation(actual_JSON, "default", false);
var new_manager = new CreatureManager(new_creature);
new_manager.AddAnimation(new_animation_1);
new_manager.SetActiveAnimationName("default", false);
new_manager.SetShouldLoop(true);
new_manager.SetIsPlaying(true);
new_manager.RunAtTime(0);
// Get the canvas element from our HTML above
var canvas = document.getElementById("renderCanvas");
// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
// Now, call the createScene function that you just finished creating
var data = createScene(canvas, engine);
// Create creature renderer
var new_creature_renderer = new CreatureBabylonRenderer("CreatureRenderer",
data.scene, new_manager,
data.creature_texture);
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
new_manager.Update(0.05);
new_creature_renderer.UpdateData();
//new_creature_renderer.renderMesh.scaling = new BABYLON.Vector3(-1, 1, 1);
data.scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
}
};
xobj.send(null);
// This begins the creation of a function that we will 'call' just after it's built
var createScene = function (canvas, engine) {
// Now create a basic Babylon Scene object
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -30), scene);
// This targets the camera to scene origin
camera.setTarget(new BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, false);
// This creates a light, aiming 0,1,0 - to the sky.
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
// Dim the light a small amount
light.intensity = 0;
// creature
var creature_texture = new BABYLON.StandardMaterial("creatureTexture", scene);
//creature_texture.emissiveColor = new BABYLON.Color3(1, 1, 1);
creature_texture.diffuseTexture = new BABYLON.Texture("iceDemonExport_character_img.png", scene);
creature_texture.diffuseTexture.hasAlpha = true;
creature_texture.emissiveTexture = new BABYLON.Texture("iceDemonExport_character_img.png", scene);
creature_texture.emissiveColor = new BABYLON.Color3(1, 1, 1);
creature_texture.backFaceCulling = false;
// Leave this function
return {"scene":scene, "creature_texture":creature_texture};
}; // End of createScene function
</script>
</body>
</html>