diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a12f927
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+ Lonely Christmas | 20221224
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..117d1d4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,117 @@
+main();
+
+function main() {
+ const scene = initScene();
+
+ const radialSegments = 64;
+ const heightSegments = 32;
+ const rootRadius = 7;
+ const rootHeight = 21;
+ const numLeaf = 3;
+ const leafRadius = 13;
+ const leafRadiusIncrement = 2;
+ const leafHeight = 20;
+ const leafHeightIncrement = 3;
+ const leafOffset = -7;
+
+ const rootGeometry = new THREE.CylinderGeometry(
+ rootRadius,
+ rootRadius,
+ rootHeight,
+ radialSegments
+ );
+ const rootMaterial = new THREE.MeshBasicMaterial({ color: "#613B16" });
+ const root = new THREE.Mesh(rootGeometry, rootMaterial);
+ root.position.y = -rootHeight;
+ scene.add(root);
+
+ const leafMaterial = new THREE.MeshBasicMaterial({ color: "green" });
+ for (let i = 0; i < numLeaf; i++) {
+ const leafGeometry = new THREE.ConeGeometry(
+ leafRadius + leafRadiusIncrement * (numLeaf - i),
+ leafHeight + leafHeightIncrement * (numLeaf - i),
+ radialSegments,
+ heightSegments
+ );
+ const leaf = new THREE.Mesh(leafGeometry, leafMaterial);
+ leaf.position.y = (leafHeight + leafOffset) * i;
+ scene.add(leaf);
+ }
+
+ //region star
+ const numbVertices = 5;
+ const starInnerRadius = 3;
+ const starOuterRadius = 6;
+ const innerStarVertices = [];
+ const outerStarVertices = [];
+ const angleOfAPart = (2 * Math.PI) / numbVertices;
+ const innerOffset = -Math.PI / 2;
+ const outerOffset = innerOffset + angleOfAPart / 2;
+ for (let i = 0; i < numbVertices; i++) {
+ const innerStarAngle = innerOffset + angleOfAPart * i;
+ const outerStarAngle = outerOffset + angleOfAPart * i;
+ innerStarVertices.push({
+ x: starInnerRadius * Math.cos(innerStarAngle),
+ y: starInnerRadius * Math.sin(innerStarAngle),
+ });
+ outerStarVertices.push({
+ x: starOuterRadius * Math.cos(outerStarAngle),
+ y: starOuterRadius * Math.sin(outerStarAngle),
+ });
+ }
+
+ const points = [{ x: 0, y: 0 }];
+ for (let i = 0; i < numbVertices; i++) {
+ points.push(innerStarVertices[i]);
+ points.push(outerStarVertices[i]);
+ }
+ points.push(innerStarVertices[0]);
+
+ const starShape = new THREE.Shape();
+ starShape.setFromPoints(points);
+
+ const geometry = new THREE.ShapeGeometry(starShape);
+ const material = new THREE.MeshBasicMaterial({ color: "yellow" });
+ const mesh = new THREE.Mesh(geometry, material);
+ scene.add(mesh);
+ mesh.position.y = 41;
+ //endregion
+}
+
+function initScene() {
+ const scene = new THREE.Scene();
+
+ const camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 1000
+ );
+ camera.position.z = 100;
+
+ const renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ renderer.setPixelRatio(window.devicePixelRatio);
+ renderer.setAnimationLoop(() => {
+ renderer.render(scene, camera);
+ });
+
+ const canvas = renderer.domElement;
+ document.body.appendChild(canvas);
+
+ const controls = new THREE.OrbitControls(camera, canvas);
+ controls.update();
+
+ function onWindowResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ window.addEventListener("resize", onWindowResize);
+
+ return scene;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8d57b23
--- /dev/null
+++ b/style.css
@@ -0,0 +1,26 @@
+html, body {
+ background-color: black;
+ font-family: 'JetBrains Mono', sans-serif;
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+ text-align: center;
+}
+
+canvas {
+ height: 100%;
+ width: 100%;
+}
+
+a {
+ color: #aa00ff;
+}
+
+.footer {
+ bottom: 12px;
+ color: white;
+ font-size: 12pt;
+ position: fixed;
+ text-align: center;
+ width: 100%;
+}