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

Question

我想通过单击 html 页面上的按钮导出场景的二维图像。我应该将哪一行代码添加到我的函数中？它似乎不起作用并下载图像。（我使用 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.

} );

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

How to export an image from a scene from threeJS

html

javascript

3d

export

three.js