/
index.html
136 lines (115 loc) · 4.29 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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CreateGround tests</title>
<style>
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
canvas {
display:block;
}
</style>
<!-- JQuery-->
<script src="lib/jquery-1.10.2.js"></script>
<!-- BABYLON-->
<script src="lib/babylon.1.12.js"></script>
<script src="createTiledGround.js"></script>
</head>
<body>
<div id="rootDiv">
<canvas id="canvas_renderer"></canvas>
</div>
<script>
$(function() {
// Get the Canvas element from our HTML below
var canvas = document.getElementById("canvas_renderer");
// Load BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
window.addEventListener("resize", function(){
engine.resize();
});
// Scene
var scene = new BABYLON.Scene(engine);
// Camera
var camera = init_camera(scene);
camera.attachControl(canvas);
// Light
var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(200, 200, 0), scene);
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// Creation of tileGround
var xmin = -3;
var zmin = -3;
var xmax = 3;
var zmax = 3;
var precision = {
"w" : 2,
"h" : 2
};
var subdivisions = {
'h' : 8,
'w' : 8
};
var vData = createTiledGround(xmin, zmin, xmax, zmax, precision, subdivisions);
var ground = new BABYLON.Mesh("Ground", scene);
var grid = new BABYLON.Mesh("Grid", scene);
vData.applyToMesh(ground);
vData.applyToMesh(grid);
// Create Multi Material
var whiteMaterial = new BABYLON.StandardMaterial("White Material", scene);
whiteMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
//~ whiteMaterial.wireframe = true;
var blackMaterial = new BABYLON.StandardMaterial("Black Material", scene);
blackMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
//~ blackMaterial.wireframe = true;
var gridMaterial = new BABYLON.StandardMaterial("Grid Material", scene);
gridMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);
gridMaterial.wireframe = true;
var multimat = new BABYLON.MultiMaterial("Multi Material", scene);
multimat.subMaterials.push(whiteMaterial);
multimat.subMaterials.push(blackMaterial);
ground.material = multimat;
grid.material = gridMaterial;
console.log(vData.positions);
console.log(vData.indices);
// Apply Multi Material
ground.subMeshes = [];
var verticesCount = ground.getTotalVertices();
var tileIndicesLength = 6 * precision.w * precision.h;
var base = 0;
for (var row = 0; row < subdivisions.h; row++) {
for (var col = 0; col < subdivisions.w; col++) {
ground.subMeshes.push(new BABYLON.SubMesh(row%2 ^ col%2, 0, verticesCount, base , tileIndicesLength, ground));
base += tileIndicesLength;
}
}
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
});
});
</script>
</body>
<script>
function init_camera(scene){
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 10, BABYLON.Vector3.Zero(), scene);
camera.checkCollisions = true;
camera.maxZ = 10000;
camera.speed = 5;
camera.wheelPrecision = 20;
camera.lowerRadiusLimit = 1;
camera.keysUp = [90]; // Touche Z
camera.keysDown = [83]; // Touche S
camera.keysLeft = [81]; // Touche Q
camera.keysRight = [68]; // Touche D
return camera;
}
</script>
</html>