xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta6
name="viewport"7
content="width=device-width, initial-scale=1, shrink-to-fit=no"8
/>9
<meta http-equiv="x-ua-compatible" content="ie=edge" />10
<title>Material Design for Bootstrap</title>11
<!-- MDB icon -->12
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />13
<!-- Font Awesome -->14
<link15
rel="stylesheet"16
href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"17
/>18
<!-- Google Fonts Roboto -->19
<link20
rel="stylesheet"21
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"22
/>23
<!-- MDB -->24
<link25
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css"26
rel="stylesheet"27
/>28
29
<style>30
.webgl {31
position: absolute;32
top: 0;33
left: 0;34
outline: none;35
z-index: -1;36
}37
</style>38
</head>39
<body>40
<div class="container text-center text-white">41
<h1 class="my-5">Bootstrap 5 & Three.js starter templatee</h1>42
<h2>43
With the use of44
<a target="_blank" href="https://mdbootstrap.com/" class="text-reset"45
><u>MDB UI KIT</u></a46
>47
</h2>48
</div>49
50
<canvas class="webgl"></canvas>51
52
<script53
type="text/javascript"54
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.js"55
></script>56
57
<!-- Three.js core -->58
<script59
type="text/javascript"60
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"61
></script>62
<!-- Three.js setup -->63
<script type="text/javascript">64
65
// Texture66
const textureLoader = new THREE.TextureLoader();67
const normalTexture = textureLoader.load("https://mdbootstrap.com/api/snippets/static/screenshots/custom-3495273.jpeg");68
69
// Canvas70
const canvas = document.querySelector("canvas.webgl");71
72
// Scene73
const scene = new THREE.Scene();74
75
// Objects76
const geometry = new THREE.BoxGeometry(1, 1, 1);77
78
// Materials79
const material = new THREE.MeshStandardMaterial();80
material.map = normalTexture;81
82
// Mesh83
const shape = new THREE.Mesh(geometry, material);84
scene.add(shape);85
86
// Lights87
const pointLight = new THREE.PointLight(0xffffff, 1);88
pointLight.position.x = 2;89
pointLight.position.y = 3;90
pointLight.position.z = 4;91
scene.add(pointLight);92
93
/**94
* Sizes95
*/96
const sizes = {97
width: window.innerWidth,98
height: window.innerHeight,99
};100
101
window.addEventListener("resize", () => {102
// Update sizes103
sizes.width = window.innerWidth;104
sizes.height = window.innerHeight;105
106
// Update camera107
camera.aspect = sizes.width / sizes.height;108
camera.updateProjectionMatrix();109
110
// Update renderer111
renderer.setSize(sizes.width, sizes.height);112
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));113
});114
115
/**116
* Camera117
*/118
// Base camera119
const camera = new THREE.PerspectiveCamera(120
75,121
sizes.width / sizes.height,122
0.1,123
100124
);125
camera.position.x = 0;126
camera.position.y = 0;127
camera.position.z = 5;128
scene.add(camera);129
130
/**131
* Renderer132
*/133
const renderer = new THREE.WebGLRenderer({134
canvas: canvas,135
});136
renderer.setSize(sizes.width, sizes.height);137
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));138
139
/**140
* Animate141
*/142
143
const clock = new THREE.Clock();144
145
const tick = () => {146
const elapsedTime = clock.getElapsedTime();147
148
// Update objects149
shape.rotation.y = 0.2 * elapsedTime;150
shape.rotation.x = 0.2 * elapsedTime;151
152
// Update Orbital Controls153
// controls.update()154
155
// Render156
renderer.render(scene, camera);157
158
// Call tick again on the next frame159
window.requestAnimationFrame(tick);160
};161
162
tick();163
</script>164
</body>165
</html>166
1
1
1
1
Console errors: 0