Как вы связываете элементы DOM с tween.js?

Question

Как вы относитесь TWEEN.js элементу DOM, чтобы сделать некоторые сложные (или простые) эффекты анимации на этом элементе DOM?

У меня есть демонстрация в Интернете, вам нужно создать сложную анимацию (используя three.js), а DOM (чтобы показать или скрыть элементы, связанные с TWEEN.js для элементов DOM, элементов DOM) был написан внутри HTML (просто медленно, чтобы показать или скрыть эффект).

Реализация метода clickMeOk позволила получить анимационные эффекты, но я надеюсь, что в то же время я получу еще один эффект - отображение или скрытие текстовых описаний (показанных или скрытых с помощью анимации).

var isMeTweening = false;
function clickMeOk() {
    if (isMeTweening) 
        return;
    isMeTweening = true;
    var scale = mesh6.scale.x < 1 ? 1 : 0.001;

    new TWEEN.Tween(mesh6.scale)
        .to({ x: scale, y: scale, z: scale }, 2000)
        .easing(TWEEN.Easing.Quartic.InOut)
        .onComplete(function() {
            isMeTweening = false;
        }).start();

    var opacity = mesh6.material.opacity > 0 ? 0 : 0.5;
    new TWEEN.Tween(mesh6.material).to({ opacity: opacity }, 1800).easing(TWEEN.Easing.Quartic.InOut).start();

    //Here you want to add DOM element animation (display or hide)




}

Спасибо!

Answer 1

Я думаю, что вы должны использовать CSS для создания анимации на DOM Elements.

https://www.w3schools.com/css/css3_animations.asp