Issue with STL file

Questions
, , ,
1

Hi,
I am working on creating coin using threejs and I am able to create coin. I am using png images for showing front and back of coin. It is working perfectly, but when I am converting scene to stl it is not showing back and front images in 3D printer or even in 3D view. My images contains text.

Below is my code:

 var geometry = new THREE.CylinderGeometry(1, 1, 0.05, 32, 1, false);
    var aFaces = geometry.faces.length;
    for (var i = 0; i < aFaces; i++) {
        if (i < 64) {
            geometry.faces[i].materialIndex = 0;
        } else if (i > 63 && i < 96) {
            geometry.faces[i].materialIndex = 1;
        } else {
            geometry.faces[i].materialIndex = 2;
        }
    }
    var materialTop = new THREE.MeshPhongMaterial({ color: 0x0000FF });
    var uvTexBack = new THREE.TextureLoader().load("../Images/BackCoin.png");
    var materialSide = new THREE.MeshPhongMaterial({ map: uvTexBack, side: THREE.DoubleSide });
    var uvTexFront = new THREE.TextureLoader().load("../Images/FrontCoin.png");
    var materialBottom = new THREE.MeshPhongMaterial({ map: uvTexFront, side: THREE.DoubleSide });
    var materialsArray = [];
    materialsArray.push(materialTop); //materialindex = 0
    materialsArray.push(materialSide); // materialindex = 1
    materialsArray.push(materialBottom); // materialindex = 2
    var material = new THREE.MeshFaceMaterial(materialsArray);
    var cone = new THREE.Mesh(geometry, material);
    scene.add(cone);

STL conversion code is:
var exporter = new THREE.STLExporter();
        var str = exporter.parse(scene); // Export the scene
        var blob = new Blob([str], { type: 'text/plain' }); // Generate Blob from the string

        //Following code will help you to save the file without FileSaver.js
        var link = document.createElement('a');
        link.style.display = 'none';
        document.body.appendChild(link);
        link.href = URL.createObjectURL(blob);
        link.download = 'Scene.stl';
        link.click();

Please help me what I am missing here. Is images are not supported in STL or there is some other reason.

Thanks

2

STL does not support textures or materials. You can only use it with plain geometry data.

Consider to use 3MF if possible. Related examples: three.js examples

3

Thanks for the update. I have added two scenes, one with text & other with cylinder. I set the position of text over cylinder and 3D printer is showing both cylinder & text but when we are rotating whole object it distorts.

Now I am trying to find out a way to add text over the object so I can place actual text over cylinder, but I am not able to find exact way for this. Could you please guide me.

Regarding 3MF, is it possible to create 3MF file using three js?

4

No sorry, there is no 3MFExporter.

Regarding your other question (cylinder/text) I recommend to create a new topic for this.

5

@Mugen87 Thanks. I will create new topic for my question (cylinder/text).