Как экспортировать изображение из сцены из threeJS

Я хотел бы экспортировать 2D-изображение моей сцены, нажав кнопку на моей html-странице. Какую строку кода я должен добавить в свою функцию? похоже не получается и скачать образ. (Я использую хром в качестве браузера)

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.info(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 html three.js 3d export

14.12.2020 19:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

421

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

} );

Спасибо за ваш ответ. Он по-прежнему не запускает загрузку снимка. Мой элемент с идентификатором «exportLink» — это <p>. может из-за этого не работает?

— 14.12.2020 22:57

@LabSintesi exportLink может быть чем угодно. Вы назначили ему реагировать на события click своей функцией, но не более того. В моем коде я создаю новый элемент, который соответствует: <a href = "--the dataURL--" download = "export.png"></a>, который затем нажимается. Если это не запускает загрузку, проверьте консоль (F12) на наличие ошибок или проверьте, не блокирует ли ваш браузер загрузку.

— 15.12.2020 18:03

14.12.2020 19:40