-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (104 loc) · 3.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ciaran Johnson | Homepage</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<style>
canvas {
width: 100%;
height: 100%;
touch-action: none;
overflow: auto;
}
#buttons-container {
position: relative;
width: 100%;
height: 30px;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.button {
padding: 10px 20px;
margin: 0 5px;
background-color: #777;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}
#text-overlay {
position: absolute;
top: 20%;
left: 50%;
color: white;
font-size: 20px;
font-family: Arial, sans-serif;
z-index: 999;
}
</style>
</head>
<body>
<div id="buttons-container">
<a href="#" class="button">Button 1</a>
<a href="#" class="button">Button 2</a>
<a href="#" class="button">Button 3</a>
</div>
<canvas id="renderCanvas"></canvas>
<div id="text-overlay">Hello, World!</div>
<div id="content">
<section>I am Ciarán Johnson, A computer science student in DCU.</section>
</div>
<script>
// Disable scrolling
document.body.style.overflow = 'hidden';
document.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2.3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
BABYLON.SceneLoader.ImportMesh("", "./assets/desk/", "desk.gltf", scene, function (meshes) {
var parentModel = meshes[0];
parentModel.scaling = new BABYLON.Vector3(2, 2, 2);
BABYLON.SceneLoader.ImportMesh("", "./assets/monitor/", "monitor.gltf", scene, function (meshes) {
var childModel = meshes[0];
childModel.scaling = new BABYLON.Vector3(1, 1, 1);
childModel.position = new BABYLON.Vector3(0, parentModel.scaling.y - .8, .6);
});
});
var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("./assets/skybox.hdr", scene);
var hdrSkybox = BABYLON.MeshBuilder.CreateBox("hdrSkybox", { size: 2000.0 }, scene);
var hdrSkyboxMaterial = new BABYLON.StandardMaterial("hdrSkyboxMaterial", scene);
hdrSkyboxMaterial.backFaceCulling = false;
hdrSkyboxMaterial.reflectionTexture = hdrTexture;
hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
hdrSkyboxMaterial.disableLighting = true;
hdrSkybox.material = hdrSkyboxMaterial;
return scene;
};
var scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
});
</script>
</body>
</html>