Capture Transparent screenshot

No composer

by orion_prime

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - glTF loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
</head>

<style>
    body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}
</style>

<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src=" https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
    <script src=" https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
</body>

</html>

JavaScript

let scene, camera, renderer, controls, gui=new dat.GUI()



const init = () => {
    const container = document.createElement("div");
    document.body.appendChild(container);

    renderer = new THREE.WebGLRenderer({
        alpha: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x00ff00, 0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.toneMapping = THREE.LinearToneMapping;
    container.appendChild(renderer.domElement);
    renderer.outputEncoding = THREE.sRGBEncoding;


    scene = new THREE.Scene();
    addOrbitCam()
    loadHDRI();
    loadGLTF();
    addGUI();
    window.addEventListener("resize", onWindowResize, false);
}

const animate = () => {
    requestAnimationFrame(animate);
    render();
}

const render = () => {
    renderer.render(scene, camera);
}

const onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

const addOrbitCam = () => {
    camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.25,
        1000
    );
    camera.position.set(-1.8, 0.6, 2.7);
    controls = new THREE.OrbitControls(camera, renderer.domElement);
}
const loadHDRI = () => {
    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileEquirectangularShader();
    let hdri = new THREE.RGBELoader()
        .setDataType(THREE.UnsignedByteType)
        .load(
            "https://threejs.org/examples/textures/equirectangular/quarry_01_1k.hdr",
            function (texture) {
                const envMap = pmremGenerator.fromEquirectangular(texture).texture;
                scene.background = envMap;
                scene.environment = envMap;
                texture.dispose();
                pmremGenerator.dispose();
            }
        );
}

const loadGLTF = () => {
    const loader...