diff --git a/main.js b/main.js index 444ed8c..9036cd3 100644 --- a/main.js +++ b/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; }