init threejs

Author: viperML

package-lock.json

@@ -27,6 +27,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/sanitize-html": "^2.11.0",
+    "@types/three": "^0.170.0",
     "@typescript-eslint/parser": "^7.16.0",
     "astro": "^4.10.1",
     "eslint": "^8.57.0",
@@ -43,6 +44,7 @@
     "remark-mark-highlight": "^0.1.1",
     "sanitize-html": "^2.13.0",
     "satori": "^0.10.14",
+    "three": "^0.171.0",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.16.0",
     "unified": "^11.0.5",

package.json

@@ -5,7 +5,7 @@ import Centered from "../../components/Centered.astro";
 import { highlight } from "neohome-rs";
 
 const webringSite = "ayats";
-const webringURL = "https://nixwebr.ing"
+const webringURL = "https://nixwebr.ing";
 ---
 
 <Base
@@ -14,8 +14,6 @@ const webringURL = "https://nixwebr.ing"
     }}
 >
     <Centered class:list={["test"]}>
-
-
         <div class="box">
             <h2>Nix Webring</h2>
 
@@ -27,10 +25,49 @@ const webringURL = "https://nixwebr.ing"
                 <li><a href=`${webringURL}/rand`>🎲</a></li>
                 <li><a href=`${webringURL}/next/${webringSite}`>→</a></li>
             </ul>
+
+            <div id="my-canvas"></div>
         </div>
     </Centered>
 </Base>
 
+<script>
+    import * as THREE from "three";
+
+    const width = 600;
+    const height = 600;
+
+    // init
+
+    const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
+    camera.position.z = 1;
+
+    const scene = new THREE.Scene();
+
+    const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
+    const material = new THREE.MeshNormalMaterial();
+
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(width, height);
+    renderer.setAnimationLoop(animate);
+    // document.body.appendChild(renderer.domElement);
+    const elem = document.getElementById("my-canvas");
+    if (elem !== null) {
+        elem.appendChild(renderer.domElement);
+    }
+
+    // animation
+
+    function animate(time) {
+        mesh.rotation.x = time / 2000;
+        mesh.rotation.y = time / 1000;
+
+        renderer.render(scene, camera);
+    }
+</script>
 
 <style>
     .box {
@@ -57,4 +94,10 @@ const webringURL = "https://nixwebr.ing"
             padding: 10px;
         }
     }
+
+    #my-canvas {
+        width: 600px;
+        height: 600px;
+        background-color: black;
+    }
 </style>