使用three.js将透明背景PNG包裹在圆柱体周围时保留原始颜色答案

【问题标题】：Preserve original colour when wrapping a transparent background PNG around a cylinder using three.js使用three.js将透明背景PNG包裹在圆柱体周围时保留原始颜色
【发布时间】：2021-11-04 02:07:10
【问题描述】：

使用以下代码和three.js，我可以将透明背景PNG包裹在圆柱体周围..

actualCode(THREE);
function actualCode(THREE) {
    
    let texture;

    //Preload image, then trigger rendering
    const loader = new THREE.TextureLoader();
    //Example with image hosted from Imgur:
    texture = loader.load("https://automation.stickermonkey.shop/codeplayground/glassetch/2-wrapdesign/images/defaultimage.png", function(_tex) {
        console.log("texture loaded");
        // /*Debugging:*/ setTimeout(() => document.body.appendChild(texture.image), 100);
        //views 17.5=front | 355=side | 139.6=back
        renderImageSolo(355);
    });

    function renderImageSolo(angle) {
        //Init just main renderer / scene
        const solo_renderer = new THREE.WebGLRenderer({
            antialias: true,
            preserveDrawingBuffer: true, // <-- avoid plain black image
            alpha: true
        });
        solo_renderer.setSize(500, 500);
        document.body.appendChild(solo_renderer.domElement);
        const solo_scene = new THREE.Scene();
        //Init camera orig values =(30, 400.0 / 400, 1, 1000)
        
        const camera = new THREE.PerspectiveCamera(80, 500.0 / 500, 1, 100);
        camera.position.set(0, 1.3, 10);
        camera.lookAt(solo_scene.position);
        //Set an ambient light
        //const light = new THREE.AmbientLight(0xddd8d9); // soft white light
        //solo_scene.add(light);
        

        //Draw painting alone orig values -= (1.5, 1.5, 8.3, 240, 1, true)
        const paintgeom = new THREE.CylinderGeometry(3, 3, 8.3, 1000, 10, true);
        const paintmaterial = new THREE.MeshStandardMaterial({
            color: (0xddd8d9),
            map: texture,
        });
        
        const paint = new THREE.Mesh(paintgeom, paintmaterial);
        
        
        //Add paint to scene
        solo_scene.add(paint);
        //Rotate paint by angle
        paint.rotation.y = angle;
        //paint.color.set(0xddd8d9);
        //Draw result
        //solo_scene.background = new THREE.Color(0x000000, 0);
        solo_renderer.setClearColor( 0xddd8d9, 0 ); // the default
        solo_renderer.render(solo_scene, camera);
        //Save result
        saveImage(solo_renderer.domElement, "defaultimage.png")
    }

    //Save canvas as image by posting it to special url on server
    function saveImage(canvas, filename) {
        const dataUrl = canvas.toDataURL("image/png");
        const fileNameEnc = encodeURIComponent(filename);
        fetch('./photo_upload.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `data=${dataUrl}&filename=${fileNameEnc}`,
        })
        .then(response => {
            return response.json();
        })
        .then(data => {
            alert(data.message); //Show ajax result
        })
        .catch(err => { //Handle errors
            console.log(err);
            alert(err.message);
        });
    }
};

里面的原图是这样的……

而当前的输出是this..

它的环绕面按我的预期工作，但是当我想要/期望它保留输入图像的原始颜色时，图像变成了黑色。

谁能告诉我如何让它保持原始图像颜色，或者更好地仍然能够将颜色更改为我想要的任何颜色？

【问题讨论】：

MeshStandardMaterial 需要灯光来显示它们的颜色。没有光，您将在网格的任何可见部分上得到纯黑色。如果您只想显示 PNG 图像的确切颜色，我建议您使用 MeshBasicMaterial，因为它不需要照明，从而消除了颜色管道中的一层复杂性。

标签： javascript three.js png

【解决方案1】：

感谢 Marquizzo 的评论为我指明了正确的方向。

单独从MeshStandardMaterial 切换到MeshBasicMaterial 并不能解决问题，但是当与...一起使用时...

MeshBasicMaterial( { map: texture, transparent: true } );

我得到了想要的结果。

【讨论】：