Как я могу загрузить разные анимации три. js одну за другой по запросу на один и тот же холст? - PullRequest
Новая
       32

Как я могу загрузить разные анимации три. js одну за другой по запросу на один и тот же холст?

0 голосов
/ 30 апреля 2020

Здравствуйте, я работаю над проектом и хотел попросить вас о помощи.

У меня есть три различных варианта. js визуализаций и я буду sh, чтобы загрузить их один за другим по запросу (кнопка / время прошло) на той же главной странице html (как в галерее).

Я попытался изменить sr c моего основной элемент в js, но затем я теряю весь контроль над программой, поскольку хочу, чтобы основной сценарий оставался основным элементом управления приложения (для создания функций, таких как загрузка / выгрузка анимаций и т. д. c ..)

Каждая три. js визуализация имеет свой {index. html /main.js/ styles.css}, и каждый из них уникален (использует разные библиотеки / немного разные стили)

Структура Пример трех. js плагин анимации:

enter image description here

Я хочу спросить вас, как я могу загрузить их в сингл canvas и переключаться между анимациями, как в галерее, но сохраняя их уникальные css и libs, и keepin g мой основной js файл приложения в управлении. я думаю, что здесь чего-то не хватает.

Мне удалось сделать это с помощью iframe, но это не то, что я ищу.

Снимок экрана того, что я сделал с iframe: Screenshot

При нажатии на кнопку изменяется sr c кадра i на следующий индекс. html файл различной визуализации.

Пример того, как я сделал метод iframe:

HTML: 

<body>
    <iframe src="regular visuals/threejs starts-connections/index.html" id='frameDemo'></iframe>
    <button class="btn btn-info btn-lg" id="btn1"><strong>Show me more</strong></button>     
    <script src="main.js"></script>
</body>

JS: 

var src=["space","circle","smoke-effects"];

var i=0;
$("#btn1").on("click",function(){
        if(i<src.length)
        {
                $('#frameDemo').attr('src',"regular visuals/threejs "+src[i]+"/index.html");
        }
        i++;

});

Решение iframe мне не подходит, потому что я хочу иметь возможность самостоятельно управлять потоком визуализаций (загрузка / выгрузка / остановка / воспроизведение). И мне нужно, чтобы это было в элементе canvas / div.

Я думаю, что мне здесь чего-то не хватает, надеюсь, вы поможете ребятам! Спасибо!

...