Attempting to create a Pyraminx, a tetrahedron made up of multiple triangles, through my coding. The approach I am taking may not be very precise. You can find my code here: https://codepen.io/jeffprod/pen/XWbBZLN.
The issue I'm facing is manually inputting the coordinates for the facesVectors. It seems to work fine for the yellow and blue sides, but positioning the red and green triangles is proving to be challenging.
Is there a simpler way to achieve this?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(-2, 1, 3);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
// Creating an equilateral triangle
const sideLength = 1
const x = 0
const y = 0
const geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(x, (Math.sqrt(3) / 2 * sideLength) - (sideLength / 2), 0))
geometry.vertices.push(new THREE.Vector3(x - (sideLength / 2), y - (sideLength / 2), 0))
geometry.vertices.push(new THREE.Vector3(x + (sideLength / 2), y - (sideLength / 2), 0))
geometry.faces.push(new THREE.Face3(0, 1, 2))
const facesColors = [
0xFFFF00, // yellow
0xFF0000, // red
0x0000FF, // blue
0x008000 // green
]
// 36 triangles forming the Pyraminx
// numbers represent indexes of facesColors
const pos = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 3, 1, 1, 1, 2, 2, 2, 3, 3, 3, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3
]
// Vectors for each triangle forming the tetrahedron
const facesVectors = [
[0, 0, -1.5],
[-0.52, 0, -0.6],
[0, 0, -0.48],
[0.52, 0, -0.6],
[-1.04, 0, 0.3],
[-0.52, 0, 0.42],
[0, 0, 0.3],
[0.52, 0, 0.42],
[1.04, 0, 0.3],
[-1.2, -0.16, 0.2],
[-1.04, -0.45, 0.55],
[-0.52, -0.34, 0.62],
[0, -0.45, 0.55],
[0.52, -0.34, 0.62],
[1.04, -0.45, 0.55],
[1.2, -0.16, 0.15],
[-0.6, -0.16, -0.7],
[-0.9, -0.3, -0.1],
[-0.5, -0.5, -0.5]
]
for (let i = 0; i < facesVectors.length; i++) {
material = new THREE.MeshBasicMaterial({ color: facesColors[pos[i]] })
face = new THREE.Mesh(geometry, material)
face.position.set(facesVectors[i][0], facesVectors[i][1], facesVectors[i][2])
// Applying rotations
if ([0, 1, 2, 3, 4, 5, 6, 7, 8].includes(i)) {
face.rotation.x = -(Math.PI / 2)
}
if ([2, 5, 7, 10, 12, 14].includes(i)) { // 180 degrees
face.rotation.z = Math.PI
}
if ([9, 16, 17, 18, 25, 26, 27, 28, 29].includes(i)) {
if (i === 17) {
face.rotation.x = -(1 * Math.PI) / 6
face.rotation.y = -(2 * Math.PI) / 3
face.rotation.z = -(1 * Math.PI) / 6
} else {
face.rotation.x = -Math.PI / 6
face.rotation.y = -2 * Math.PI / 3
face.rotation.z = Math.PI / 6
}
}
if ([15, 22, 23, 24, 31, 32, 33, 34, 35].includes(i)) {
face.rotation.x = -Math.PI / 6
face.rotation.y = 2 * Math.PI / 3
face.rotation.z = -Math.PI / 6
} else if ([10, 11, 12, 13, 14, 19, 20, 21, 30].includes(i)) {
face.rotation.x = Math.PI / 6
}
scene.add(face)
}
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>