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

Question

使用以下代码 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);
        });
    }
};

原来的img是这样的...

而当前的输出是这个这个..

它的环绕面如我所料工作，但是当我 wanted/expected 它以保留输入图像的原始颜色时，图像正在变成黑色。

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

Answer 1

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

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

一起使用时

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

我得到了完全想要的结果。

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

Preserve original colour when wrapping a transparent background PNG around a cylinder using three.js

javascript

three.js

png