如何从threeJS的场景中导出图像

Question

我想通过单击我的 html 页面上的按钮来导出我的场景的 2d 图像。我应该将哪一行代码添加到我的函数中？它似乎不起作用并下载图像。 （我使用chrome作为浏览器）

const exportLink = document.getElementById( 'exportLink' );
exportLink.addEventListener( 'click', () => {

    rendererExport.render( scene, camera );
    const dataURL = rendererExport.domElement.toDataURL( 'image/png' );

    exportLink.href = dataURL;
    exportLink.download = 'export.png';

} );
}

这是我的渲染函数

function render() {

renderer.render(scene, camera);
  document.getElementById("colore").onclick= function(){
    somma= +slider.value + +slider1.value + +slider2.value + +slider3.value + +slider4.value;
    console.log(somma);

    if(somma<=70){
      customMaterial1.uniforms.glowColor.value.set( 0x668072 );
      customMaterial2.uniforms.glowColor.value.set( 0x4f6749 );
      customMaterial3.uniforms.glowColor.value.set( 0x491520 );
      customMaterial4.uniforms.glowColor.value.set( 0xb3c753 );
      customMaterial5.uniforms.glowColor.value.set( 0xe61f59 );
    }
}

Answer 1

您的按钮已配置为执行您共享的 JavaScript 函数。但是，下载需要执行导航操作才能触发下载。执行此操作的常用方法是使用临时锚 (<a>)。

const exportLink = document.getElementById( 'exportLink' );
exportLink.addEventListener( 'click', () => {

    rendererExport.render( scene, camera );
    const dataURL = rendererExport.domElement.toDataURL( 'image/png' );

    let a = document.createElement( 'a' ); // Create a temporary anchor.
    a.href = dataURL;
    a.download = 'export.png';
    a.click(); // Perform the navigation action to trigger the download.

} );