feat: corner mesh

main.js

@@ -1,4 +1,6 @@
-// TODO: meshes for puzzle pieces
+// TODO: corner mesh
+// TODO: cylinder mesh
+// TODO: end point mesh
 
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -29,8 +31,8 @@ controls.update();
 const redMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
 const greenMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
 const blueMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff });
-const materials = [redMaterial, greenMaterial, blueMaterial];
 
+// Make cubes
 function makeCube(xCoord, material) {
     const geometry = new THREE.BoxGeometry();
     const cube = new THREE.Mesh(geometry, material);
@@ -40,18 +42,44 @@ function makeCube(xCoord, material) {
     return cube;
 }
 
-let cubes = [];
-for (let i = 0; i < 3; i++) {
-    const cube = makeCube((i - 1)*2, materials[i]);
-    cubes.push(cube);
+class CornerCurve extends THREE.Curve {
+    constructor(scale) {
+        super();
+        this.scale = scale;
+    }
+
+    getPoint(t) {
+        const tx = (Math.sin(.5 * Math.PI * t) -.5) * this.scale;
+        const ty = (Math.cos(.5 * Math.PI * t) -.5) * this.scale;
+        const tz = 0;
+        return new THREE.Vector3(tx, ty, tz);
+    }
 }
 
+function makeCorner(material) {
+    const path = new CornerCurve(.75);
+    const tubularSegments = 20;
+    const radius = .25;
+    const radialSegments = 8;
+    const closed = false;
+    const geometry = new THREE.TubeGeometry(path, tubularSegments, radius, radialSegments, closed);
+    const mesh = new THREE.Mesh(geometry, material);
+
+    scene.add(mesh);
+    return mesh;
+}
+
+let meshes = [];
+meshes.push(makeCube(-2, redMaterial));
+meshes.push(makeCorner(greenMaterial));
+meshes.push(makeCube(2, blueMaterial));
+
 // Animation loop
 function animate() {
     requestAnimationFrame(animate);
 
-    for (let i = 0; i < cubes.length; i++) {
-        const cube = cubes[i];
+    for (let i = 0; i < meshes.length; i++) {
+        const cube = meshes[i];
         cube.rotation.x += 0.01;
         cube.rotation.y += 0.01;
     }