ktyl/pipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: corner mesh

Browse Source
This commit is contained in:
ktyl 2025-10-30 07:24:39 +00:00
parent 6620f20372
commit 8384933c83
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
main.js
View File

@ -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 * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@ -29,8 +31,8 @@ controls.update();
const redMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); const redMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const greenMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); const greenMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const blueMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff }); const blueMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff });
const materials = [redMaterial, greenMaterial, blueMaterial];
// Make cubes
function makeCube(xCoord, material) { function makeCube(xCoord, material) {
const geometry = new THREE.BoxGeometry(); const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material); const cube = new THREE.Mesh(geometry, material);
@ -40,18 +42,44 @@ function makeCube(xCoord, material) {
return cube; return cube;
} }
let cubes = []; class CornerCurve extends THREE.Curve {
for (let i = 0; i < 3; i++) { constructor(scale) {
const cube = makeCube((i - 1)*2, materials[i]); super();
cubes.push(cube); 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 // Animation loop
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
for (let i = 0; i < cubes.length; i++) { for (let i = 0; i < meshes.length; i++) {
const cube = cubes[i]; const cube = meshes[i];
cube.rotation.x += 0.01; cube.rotation.x += 0.01;
cube.rotation.y += 0.01; cube.rotation.y += 0.01;
} }