How to put numbers to the sides of a cube and later get which number landed on top

Questions
, , ,
42

@prisoner849 , I tried the method you advised but then the mesh is not visible-

const radius = 1.3;
    const verticesGeo = [
        [0, 0, 1],
        [0, 0, -1],
    ].flat();

    const sides = 10;
    for (let i = 0; i < sides; ++i) {
        const b = (i * Math.PI * 2) / sides;
        verticesGeo.push(-Math.cos(b), -Math.sin(b), 0.105 * (i % 2 ? 1 : -1));
    }

    const facesGeo = [
        [0, 2, 3],
        [0, 3, 4],
        [0, 4, 5],
        [0, 5, 6],
        [0, 6, 7],
        [0, 7, 8],
        [0, 8, 9],
        [0, 9, 10],
        [0, 10, 11],
        [0, 11, 2],
        [1, 3, 2],
        [1, 4, 3],
        [1, 5, 4],
        [1, 6, 5],
        [1, 7, 6],
        [1, 8, 7],
        [1, 9, 8],
        [1, 10, 9],
        [1, 11, 10],
        [1, 2, 11],
    ].flat();
for (let i = 0; i < 10; i++) {
            const geometry = new THREE.BufferGeometry();

            // Creating vertices
            const vertices = [];
            for (let j = 0; j < verticesGeo.length; j += 3) {
                vertices.push(verticesGeo[j], verticesGeo[j + 1], verticesGeo[j + 2]);
            }

            geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

            // Creating faces
            const indices = facesGeo.slice(i * 6, i * 6 + 6);
            geometry.setIndex(indices);

            // Create UVs
            const uvs = new Float32Array(vertices.length / 3 * 2);
            for (let j = 0; j < uvs.length; j += 2) {
                uvs[j] = (j % 4) / 4;
                uvs[j + 1] = (j % 4) / 4;
            }
            geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

            // Create canvas for text
            const canvas = document.createElement('canvas');
            canvas.width = tileSize;
            canvas.height = tileSize;
            const ctx = canvas.getContext('2d');

            // Fill background
            ctx.fillStyle = tempFillColor;
            ctx.fillRect(0, 0, tileSize, tileSize);

            // Draw text
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.font = `bold ${tileSize / 3}px Calistoga`;
            ctx.fillStyle = tempTextColor;
            ctx.fillText(
                i + 1,
                tileSize / 2,
                tileSize / 2
            );

            const texture = new THREE.CanvasTexture(canvas);
            const material = new THREE.MeshBasicMaterial({ map: texture });
            materials.push(material);

            geometries.push(geometry);
        }

        const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);
        decahedron = new THREE.Mesh(mergedGeometry, materials);
43

Any warnings or errors in browser console?

44

@prisoner849 , no errors or warning. Could you please share the code you used ?

45

Here you are: https://codepen.io/prisoner849/full/XWwoPXK

But now you’re on your own, with the code :handshake:

4 Likes
46

thank you this worked!! I adapted it to my code -

let vertStep = THREE.MathUtils.degToRad(36);
		let vertices = [
			[0, 0, 1],
			[Math.cos(vertStep * 0), Math.sin(vertStep * 0), 0.105],
			[Math.cos(vertStep * 1), Math.sin(vertStep * 1), -0.105],
			[Math.cos(vertStep * 2), Math.sin(vertStep * 2), 0.105],
		].map((p) => {
			return new THREE.Vector3(...p);
		});
		let h = vertices[0].distanceTo(vertices[2]);
		let w = vertices[1].distanceTo(vertices[3]);
		let u = (w / h) * 0.5;
		let v01 = new THREE.Vector3().subVectors(vertices[1], vertices[0]);
		let v02 = new THREE.Vector3().subVectors(vertices[2], vertices[0]);
		let dot = v02.clone().normalize().dot(v01);
		let v = 1 - dot / h;

		let gSide = new THREE.BufferGeometry()
			.setFromPoints(vertices)
			.rotateZ(-vertStep);
		gSide.setIndex([0, 1, 2, 0, 2, 3]);
		gSide.setAttribute(
			"uv",
			new THREE.Float32BufferAttribute(
				[0.5, 1, 0.5 - u, v, 0.5, 0, 0.5 + u, v],
				2
			)
		);
		gSide.computeVertexNormals();
		gSide = gSide.toNonIndexed();

		// all sides
		let gs = [];

		for (let i = 0; i < 5; i++) {
			let a = vertStep * 2 * i;
			let g1 = gSide.clone().rotateZ(-a);
			recomputeUVs(g1, i * 2 + 0);
			let g2 = gSide
				.clone()
				.rotateX(Math.PI)
				.rotateZ(vertStep + a);
			recomputeUVs(g2, i * 2 + 1);
			gs.push(g1, g2);
		}
		let g = BufferGeometryUtils.mergeBufferGeometries(gs);

		let m = new THREE.MeshLambertMaterial({
			map: getNumbers(),
		});

		decahedron = new THREE.Mesh(g, m);
47

@prisoner849 , Can we achieve the same thing using the method you used here - codepen. I have tried using the way you have used in that post here -

my codepen