Блог

Я хотел бы экспортировать 2d-изображение моей сцены, нажав кнопку на моей 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 );
    }
}
 

Ваша кнопка настроена на выполнение функции 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.

} );