I. 조건부 판별 설정하기

연결큐브가 쌓인 개수에 따라, 해당 영역의 연결큐브의 색상을 다르게 설정하는 예제입니다.
실행 결과
코드 보기
<html>
<head>
    <script
        src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
        defer
        onload="onLoadHelper();"
    ></script>

    <script>
        async function onLoadHelper() {
            await mathcore.helper.load("cube", {
                key: "TESTKEY"
            });

            const cube = new mathcore.cube.Cube();
            await cube.render("cube");

            const buttons = document.querySelectorAll(".tools button[data-name]");
            buttons.forEach((button) => {
                const icon = `url("${cube.toolManager.getToolIcon(button.dataset.name)}")`;
                button.style.backgroundImage = icon;
                button.addEventListener("click", (event) => {
                    const toolName = button.dataset.name;
                    cube.toolManager.setCurrentTool(toolName);
                });
            });

            cube.toolManager.onChangeTool((toolName) => {
                buttons.forEach((button) => {
                    if (button.dataset.name === toolName) {
                        button.classList.add("active");
                    } else {
                        button.classList.remove("active");
                    }
                });
            });

            buttons[0].dispatchEvent(new Event("click"));

            setInterval(function() {
                cube.objectManager.getAllObjects().forEach((target) => {
                    if (target.position[2] <= 1) {
                        target.color = [0.5, 0.5, 0.5, 1];
                    }
                    if (target.position[2] > 1) {
                        target.color = [0.5, 0.5, 0.5, 0.7];
                    }
                    if (target.position[2] > 2) {
                        target.color = [0.5, 0.5, 0.5, 0.5];
                    }
                    if (target.position[2] > 3) {
                        target.color = [0.5, 0.5, 0.5, 0.3];
                    }
                    if (target.position[2] > 4) {
                        target.color = [0.5, 0.5, 0.5, 0.1];
                    }
                });
            }, 100);
        }
    </script>
</head>

<body>
    <div id="cube"></div>
    <div class="tools">
        <button data-name="basic/select"></button>
        <button data-name="basic/delete"></button>
        <button data-name="cube/plain"></button>
        <button data-name="geometry/prism"></button>
    </div>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            overflow: hidden;
        }
        #cube {
            position: relative;
            flex: 1;
            height: 100%;
        }
        .tools {
            position: absolute;
            display: flex;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5px;
            column-gap: 5px;
        }
        .tools button {
            width: 40px;
            height: 40px;
            border: 1px solid black;
            border-radius: 4px;
            cursor: pointer;
            background-color: white;
            background-size: contain;
        }
        .tools button.active {
            border: 2px solid red;
        }
    </style>
</body>
</html>