Панель с кнопками для 3D v1

[nponyatov]

В приложении Цифровой двойник довольно часто используются кнопки. Я решил создать панель с кнопками для 3D в стиле ЧПУ-станка. 
В данном посте я хотел бы рассказать о том как добавить их себе в 3D-сцену и настроить. Они смогут помочь стилизовать сцену и улучшить восприятие.

1. Скачать файл ViewButtons (во вложении) и импортировать себе в сцену (Файл - Импорт).

2. Если мы начнём воспроизведение сцены они появятся в правом нижнем углу. Здесь можно увидеть название цеха и 5 кнопок: 4 кнопки с видами, кнопка INFO. Каждая кнопка с видом при нажатии будет перемещать камеру в заданное место. 

3. Кнопка INFO при нажатии откроет всплывающее окно с системной информацией и технической поддержкой. При нажатии на кнопку support@winnum.ru пользователя будет переносить в почту и начинать письмо в support.

4. Внутри ViewButtons в Объект - Действия будет лежать код самой панели.

5. Чтобы настроить кнопки с видами нужно изменить логику для них в коде в параметрах по camera.position и camera.rotation. (386-436 строки)

Код:

// Логика для общего вида
function ScriptSView(cButton) {
    console.log('Общий вид активирован');
    camera.position.x = 1.76;
    camera.position.y = 49.84;
    camera.position.z = 39;
    camera.rotation.x = -52.42 * Math.PI / 180;
    camera.rotation.y = 0 * Math.PI / 180;
    camera.rotation.z = 0 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}
// Логика для вида 1
function ScriptView1(cButton) {
    console.log('Вид 1 активирован');
    camera.position.x = -41;
    camera.position.y = 32.43;
    camera.position.z = 3.4;
    camera.rotation.x = -58 * Math.PI / 180;
    camera.rotation.y = -37.42 * Math.PI / 180;
    camera.rotation.z = -44.3 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}
// Логика для вида 2
function ScriptView2(cButton) {
    console.log('Вид 2 активирован');
    camera.position.x = 27.72;
    camera.position.y = 40.57;
    camera.position.z = 37.53;
    camera.rotation.x = -47.26 * Math.PI / 180;
    camera.rotation.y = 9.58 * Math.PI / 180;
    camera.rotation.z = 10.21 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}
// Логика для вида 3
function ScriptView3(cButton) {
    console.log('Вид 3 активирован');
    camera.position.x = -53.74;
    camera.position.y = 28.2;
    camera.position.z = 30.92;
    camera.rotation.x = -44.4 * Math.PI / 180;
    camera.rotation.y = -43.24 * Math.PI / 180;
    camera.rotation.z = -33.86 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}

6. Чтобы изменить названия кнопок нужно поменять этот код. (65-71 строки)

Код:

    // Создаем кнопки видов
    var buttons = [
        { id: 'btnSView', text: 'ОБЩИЙ ВИД', onClick: ScriptSView },
        { id: 'btnView1', text: 'ВИД 1', onClick: ScriptView1 },
        { id: 'btnView2', text: 'ВИД 2', onClick: ScriptView2 },
        { id: 'btnView3', text: 'ВИД 3', onClick: ScriptView3 },
    ];

7. Чтобы изменить название цеха нужно поменять этот код. (45-47 строки)

Код:

    // Заголовок "ЦЕХ 9" в стиле ЧПУ дисплея
    var header = document.createElement("div");
    header.innerText = 'ЦЕХ 9';

8. Чтобы изменить Системную информацию в сплывающем окне нужно поменять этот код. (273-285 строки)

Код:

    // Текст информации
    var infoText = document.createElement("div");
    infoText.innerHTML =
        '<p style="margin-bottom: 12px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">3D-СЦЕНА:</strong> ЦЕХ 9' +
        '</p>' +
        '<p style="margin-bottom: 12px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">РАЗРАБОТЧИК:</strong> ПОНЯТОВ НИКИТА' +
        '</p>' +
        '<p style="margin-bottom: 15px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">СТАТУС:</strong> СИСТЕМА АКТИВНА' +
        '</p>';
    modal.appendChild(infoText);

Полный код:

Код:

var SView, View1, View2, View3, View4;

function start() {
    createButtonContainer();
    SView = document.getElementById('btnSView');
    View1 = document.getElementById('btnView1');
    View2 = document.getElementById('btnView2');
    View3 = document.getElementById('btnView3');
    View4 = document.getElementById('btnView4');
}

function createButtonContainer() {
    var sceneView = document.querySelector("#player > div");
   
    // Создаем основной контейнер в стиле ЧПУ станка
    var mainContainer = document.createElement("div");
    mainContainer.style.position = "absolute";
    mainContainer.style.right = '20px';
    mainContainer.style.bottom = '20px';
    mainContainer.style.zIndex = '1000';
    mainContainer.style.background = 'linear-gradient(145deg, #1e1e1e, #2d2d2d)';
    mainContainer.style.border = '3px solid #404040';
    mainContainer.style.borderRadius = '2px';
    mainContainer.style.padding = '15px';
    mainContainer.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
    mainContainer.style.minWidth = '220px';
    mainContainer.style.overflow = 'hidden';
    mainContainer.style.boxShadow = '0 0 15px rgba(0, 255, 255, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5)';

    // Добавляем техно-детали
    addCNCDetails(mainContainer);

    // Верхняя панель с названием в стиле ЧПУ дисплея
    var headerPlate = document.createElement("div");
    headerPlate.style.background = 'linear-gradient(to bottom, #00b3b3, #008080)';
    headerPlate.style.border = '2px solid #00cccc';
    headerPlate.style.borderRadius = '1px';
    headerPlate.style.padding = '8px 15px';
    headerPlate.style.marginBottom = '15px';
    headerPlate.style.textAlign = 'center';
    headerPlate.style.position = 'relative';
    headerPlate.style.boxShadow = 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5)';
    headerPlate.style.textShadow = '0 0 5px rgba(0, 255, 255, 0.7)';
   
    // Заголовок "ЦЕХ 9" в стиле ЧПУ дисплея
    var header = document.createElement("div");
    header.innerText = 'ЦЕХ 9';
    header.style.color = '#00ffff';
    header.style.fontSize = '16px';
    header.style.fontWeight = 'bold';
    header.style.textTransform = 'uppercase';
    header.style.letterSpacing = '3px';
    header.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
   
    headerPlate.appendChild(header);
    mainContainer.appendChild(headerPlate);

    // Контейнер для кнопок
    var btnContainer = document.createElement("div");
    btnContainer.style.display = 'flex';
    btnContainer.style.flexDirection = 'column';
    btnContainer.style.gap = '8px';
    mainContainer.appendChild(btnContainer);

    // Создаем кнопки видов
    var buttons = [
        { id: 'btnSView', text: 'ОБЩИЙ ВИД', onClick: ScriptSView },
        { id: 'btnView1', text: 'ВИД 1', onClick: ScriptView1 },
        { id: 'btnView2', text: 'ВИД 2', onClick: ScriptView2 },
        { id: 'btnView3', text: 'ВИД 3', onClick: ScriptView3 },
    ];

    buttons.forEach(button => {
        var btn = document.createElement("BUTTON");
        btn.name = button.id;
        btn.id = button.id;
        btn.innerText = button.text;
        styleCNCButton(btn);
        btn.onclick = function () { button.onClick(btn); };
        btnContainer.appendChild(btn);
    });

    // Кнопка INFO в стиле аварийной кнопки
    var infoButton = document.createElement("BUTTON");
    infoButton.name = 'btnInfo';
    infoButton.id = 'btnInfo';
    infoButton.innerText = 'INFO';
    styleEmergencyButton(infoButton);
    infoButton.onclick = function () { showInfoModal(); };
    btnContainer.appendChild(infoButton);

    // Нижняя техно-полоса
    var footerStrip = document.createElement("div");
    footerStrip.style.height = '3px';
    footerStrip.style.background = 'linear-gradient(to right, #00cccc, #008080, #00cccc)';
    footerStrip.style.marginTop = '15px';
    footerStrip.style.borderRadius = '1px';
    footerStrip.style.boxShadow = '0 0 5px rgba(0, 255, 255, 0.3)';
    mainContainer.appendChild(footerStrip);

    sceneView.appendChild(mainContainer);
}

// Функция для добавления техно-деталей ЧПУ
function addCNCDetails(container) {
    // Добавляем угловые элементы
    const corners = [
        { top: '0', left: '0', transform: 'none' },
        { top: '0', right: '0', transform: 'scaleX(-1)' },
        { bottom: '0', left: '0', transform: 'scaleY(-1)' },
        { bottom: '0', right: '0', transform: 'scale(-1)' }
    ];

    corners.forEach(corner => {
        var cornerElement = document.createElement("div");
        cornerElement.style.position = 'absolute';
        cornerElement.style.width = '15px';
        cornerElement.style.height = '15px';
        cornerElement.style.background = 'linear-gradient(135deg, #00cccc, #008080)';
        cornerElement.style.border = '1px solid #00ffff';
        cornerElement.style.boxShadow = '0 0 5px rgba(0, 255, 255, 0.4)';
        cornerElement.style.transform = corner.transform;
        Object.assign(cornerElement.style, corner);
        container.appendChild(cornerElement);
    });

    // Добавляем техно-сетку на фон
    var gridOverlay = document.createElement("div");
    gridOverlay.style.position = 'absolute';
    gridOverlay.style.top = '0';
    gridOverlay.style.left = '0';
    gridOverlay.style.width = '100%';
    gridOverlay.style.height = '100%';
    gridOverlay.style.backgroundImage = 'linear-gradient(to right, rgba(0, 204, 204, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 204, 204, 0.1) 1px, transparent 1px)';
    gridOverlay.style.backgroundSize = '10px 10px';
    gridOverlay.style.pointerEvents = 'none';
    gridOverlay.style.zIndex = '1';
    container.appendChild(gridOverlay);
}

// Функция для стилизации обычных кнопок ЧПУ
function styleCNCButton(btn) {
    btn.style.fontSize = '12px';
    btn.style.padding = '10px 15px';
    btn.style.color = '#00ffff';
    btn.style.background = 'linear-gradient(to bottom, #333, #222)';
    btn.style.border = '2px solid #00cccc';
    btn.style.borderRadius = '1px';
    btn.style.cursor = 'pointer';
    btn.style.transition = 'all 0.2s ease';
    btn.style.fontWeight = 'bold';
    btn.style.textTransform = 'uppercase';
    btn.style.letterSpacing = '1px';
    btn.style.textShadow = '0 0 3px rgba(0, 255, 255, 0.8)';
    btn.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
    btn.style.boxShadow = 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)';

    // Эффект на hover
    btn.onmouseenter = function () {
        btn.style.background = 'linear-gradient(to bottom, #00cccc, #008080)';
        btn.style.color = '#000';
        btn.style.textShadow = '0 0 3px rgba(255, 255, 255, 0.8)';
        btn.style.boxShadow = 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 204, 204, 0.4)';
    };
   
    btn.onmouseleave = function () {
        btn.style.background = 'linear-gradient(to bottom, #333, #222)';
        btn.style.color = '#00ffff';
        btn.style.textShadow = '0 0 3px rgba(0, 255, 255, 0.8)';
        btn.style.boxShadow = 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)';
    };
   
    // Эффект при нажатии
    btn.onmousedown = function () {
        btn.style.transform = 'translateY(1px)';
        btn.style.boxShadow = 'inset 0 0 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3)';
    };
   
    btn.onmouseup = function () {
        btn.style.transform = 'translateY(0)';
        btn.style.boxShadow = 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)';
    };
}

// Функция для стилизации аварийной кнопки INFO
function styleEmergencyButton(btn) {
    btn.style.fontSize = '12px';
    btn.style.padding = '10px 15px';
    btn.style.color = '#fff';
    btn.style.background = 'linear-gradient(to bottom, #ff4444, #cc0000)';
    btn.style.border = '2px solid #ff6666';
    btn.style.borderRadius = '1px';
    btn.style.cursor = 'pointer';
    btn.style.transition = 'all 0.2s ease';
    btn.style.fontWeight = 'bold';
    btn.style.textTransform = 'uppercase';
    btn.style.letterSpacing = '1px';
    btn.style.textShadow = '0 0 3px rgba(255, 0, 0, 0.8)';
    btn.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
    btn.style.boxShadow = 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)';
    btn.style.marginTop = '10px';

    // Эффект на hover
    btn.onmouseenter = function () {
        btn.style.background = 'linear-gradient(to bottom, #ff6666, #ff0000)';
        btn.style.boxShadow = 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 0, 0, 0.4)';
        btn.style.transform = 'scale(1.05)';
    };
   
    btn.onmouseleave = function () {
        btn.style.background = 'linear-gradient(to bottom, #ff4444, #cc0000)';
        btn.style.boxShadow = 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3)';
        btn.style.transform = 'scale(1)';
    };
   
    // Эффект при нажатии
    btn.onmousedown = function () {
        btn.style.transform = 'scale(0.95)';
        btn.style.boxShadow = 'inset 0 0 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3)';
    };
   
    btn.onmouseup = function () {
        btn.style.transform = 'scale(1.05)';
        btn.style.boxShadow = 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 0, 0, 0.4)';
    };
}

// Функция для показа модального окна в стиле ЧПУ
function showInfoModal() {
    // Создаем overlay
    var overlay = document.createElement("div");
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.background = 'rgba(0, 0, 0, 0.9)';
    overlay.style.zIndex = '2000';
    overlay.style.display = 'flex';
    overlay.style.justifyContent = 'center';
    overlay.style.alignItems = 'center';
    overlay.style.backdropFilter = 'blur(3px)';
   
    // Создаем модальное окно в стиле ЧПУ дисплея
    var modal = document.createElement("div");
    modal.style.background = 'linear-gradient(145deg, #1a1a1a, #2a2a2a)';
    modal.style.border = '3px solid #00cccc';
    modal.style.borderRadius = '2px';
    modal.style.padding = '25px';
    modal.style.maxWidth = '500px';
    modal.style.width = '80%';
    modal.style.boxShadow = '0 0 30px rgba(0, 204, 204, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.6)';
    modal.style.position = 'relative';
    modal.style.color = '#00ffff';
    modal.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
    modal.style.textShadow = '0 0 3px rgba(0, 255, 255, 0.7)';

    // Добавляем техно-детали к модальному окну
    addCNCDetails(modal);

    // Заголовок модального окна
    var title = document.createElement("h2");
    title.textContent = 'СИСТЕМНАЯ ИНФОРМАЦИЯ';
    title.style.color = '#00ff00';
    title.style.marginBottom = '20px';
    title.style.textAlign = 'center';
    title.style.fontSize = '18px';
    title.style.fontWeight = 'bold';
    title.style.textTransform = 'uppercase';
    title.style.letterSpacing = '2px';
    modal.appendChild(title);
   
    // Текст информации
    var infoText = document.createElement("div");
    infoText.innerHTML =
        '<p style="margin-bottom: 12px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">3D-СЦЕНА:</strong> ЦЕХ 9' +
        '</p>' +
        '<p style="margin-bottom: 12px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">РАЗРАБОТЧИК:</strong> ПОНЯТОВ НИКИТА' +
        '</p>' +
        '<p style="margin-bottom: 15px; line-height: 1.5; font-size: 14px; color: #00cccc;">' +
            '<strong style="color: #00ff00;">СТАТУС:</strong> СИСТЕМА АКТИВНА' +
        '</p>';
    modal.appendChild(infoText);
   
    // Контейнер для контактов
    var contactContainer = document.createElement("div");
    contactContainer.style.textAlign = 'center';
    contactContainer.style.marginBottom = '20px';
    contactContainer.style.padding = '12px';
    contactContainer.style.background = 'linear-gradient(145deg, #0d2b2b, #1a4040)';
    contactContainer.style.border = '1px solid #00cccc';
    contactContainer.style.borderRadius = '1px';
    contactContainer.style.boxShadow = 'inset 0 0 10px rgba(0, 0, 0, 0.4)';
   
    var contactTitle = document.createElement("div");
    contactTitle.textContent = 'ТЕХНИЧЕСКАЯ ПОДДЕРЖКА';
    contactTitle.style.color = '#00ff00';
    contactTitle.style.marginBottom = '8px';
    contactTitle.style.fontSize = '12px';
    contactTitle.style.fontWeight = 'bold';
    contactContainer.appendChild(contactTitle);
   
    // Ссылка на email
    var emailLink = document.createElement("a");
    emailLink.href = 'mailto:support@winnum.ru';
    emailLink.textContent = 'support@winnum.ru';
    emailLink.style.color = '#00ffff';
    emailLink.style.textDecoration = 'none';
    emailLink.style.fontWeight = 'bold';
    emailLink.style.fontSize = '14px';
    emailLink.style.padding = '6px 12px';
    emailLink.style.display = 'inline-block';
    emailLink.style.transition = 'all 0.3s ease';
    emailLink.style.border = '1px solid #00cccc';
    emailLink.style.background = 'rgba(0, 204, 204, 0.1)';
   
    emailLink.onmouseenter = function() {
        emailLink.style.background = 'rgba(0, 204, 204, 0.3)';
        emailLink.style.color = '#00ff00';
        emailLink.style.boxShadow = '0 0 10px rgba(0, 204, 204, 0.4)';
    };
   
    emailLink.onmouseleave = function() {
        emailLink.style.background = 'rgba(0, 204, 204, 0.1)';
        emailLink.style.color = '#00ffff';
        emailLink.style.boxShadow = 'none';
    };
   
    contactContainer.appendChild(emailLink);
    modal.appendChild(contactContainer);
   
    // Кнопка закрытия
    var closeButton = document.createElement("button");
    closeButton.textContent = 'ЗАКРЫТЬ [ESC]';
    closeButton.style.background = 'linear-gradient(to bottom, #333, #222)';
    closeButton.style.color = '#00cccc';
    closeButton.style.border = '2px solid #00cccc';
    closeButton.style.padding = '8px 20px';
    closeButton.style.borderRadius = '1px';
    closeButton.style.cursor = 'pointer';
    closeButton.style.fontWeight = 'bold';
    closeButton.style.margin = '0 auto';
    closeButton.style.display = 'block';
    closeButton.style.transition = 'all 0.3s ease';
    closeButton.style.fontFamily = '"Share Tech Mono", "Courier New", monospace';
    closeButton.style.textTransform = 'uppercase';
   
    closeButton.onmouseenter = function() {
        closeButton.style.background = 'linear-gradient(to bottom, #00cccc, #008080)';
        closeButton.style.color = '#000';
    };
   
    closeButton.onmouseleave = function() {
        closeButton.style.background = 'linear-gradient(to bottom, #333, #222)';
        closeButton.style.color = '#00cccc';
    };
   
    closeButton.onclick = function() {
        document.body.removeChild(overlay);
    };
   
    modal.appendChild(closeButton);
    overlay.appendChild(modal);
   
    // Добавляем overlay на страницу
    document.body.appendChild(overlay);
   
    // Закрытие по клику на overlay
    overlay.onclick = function(e) {
        if (e.target === overlay) {
            document.body.removeChild(overlay);
        }
    };
   
    // Закрытие по ESC
    document.addEventListener('keydown', function closeModal(e) {
        if (e.key === 'Escape') {
            document.body.removeChild(overlay);
            document.removeEventListener('keydown', closeModal);
        }
    });
}

// Логика для общего вида
function ScriptSView(cButton) {
    console.log('Общий вид активирован');
    camera.position.x = 1.76;
    camera.position.y = 49.84;
    camera.position.z = 39;
    camera.rotation.x = -52.42 * Math.PI / 180;
    camera.rotation.y = 0 * Math.PI / 180;
    camera.rotation.z = 0 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}

// Логика для вида 1
function ScriptView1(cButton) {
    console.log('Вид 1 активирован');
    camera.position.x = -41;
    camera.position.y = 32.43;
    camera.position.z = 3.4;
    camera.rotation.x = -58 * Math.PI / 180;
    camera.rotation.y = -37.42 * Math.PI / 180;
    camera.rotation.z = -44.3 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}

// Логика для вида 2
function ScriptView2(cButton) {
    console.log('Вид 2 активирован');
    camera.position.x = 27.72;
    camera.position.y = 40.57;
    camera.position.z = 37.53;
    camera.rotation.x = -47.26 * Math.PI / 180;
    camera.rotation.y = 9.58 * Math.PI / 180;
    camera.rotation.z = 10.21 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}

// Логика для вида 3
function ScriptView3(cButton) {
    console.log('Вид 3 активирован');
    camera.position.x = -53.74;
    camera.position.y = 28.2;
    camera.position.z = 30.92;
    camera.rotation.x = -44.4 * Math.PI / 180;
    camera.rotation.y = -43.24 * Math.PI / 180;
    camera.rotation.z = -33.86 * Math.PI / 180;
    camera.updateProjectionMatrix();
    camera.updateMatrix();
}

Hello World!:

- Сообщений не найдено.