グループ化のテスト

position-x position-y position-z
rotate-x rotate-y rotate-z
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title>テスト</title>
<style>
#canvas {
    display: block;
    margin-bottom: 10px;
}
#increase, #decrease {
    width: 100px;
    height: 50px;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<div>
    <label for="position-x">position-x</label><input type="checkbox" id = "position-x">
    <label for="position-y">position-y</label><input type="checkbox" id = "position-y">
    <label for="position-z">position-z</label><input type="checkbox" id = "position-z">
</div>
<div>
    <label for="rotate-x">rotate-x</label><input type="checkbox" id = "rotate-x">
    <label for="rotate-y">rotate-y</label><input type="checkbox" id = "rotate-y">
    <label for="rotate-z">rotate-z</label><input type="checkbox" id = "rotate-z">
</div>
<button id = "increase">増加</button>
<button id = "decrease">減少</button>

<script type="module">
    import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js";

    // サイズを指定
    const width = 360;
    const height = 360;

    // レンダラー,シーン,カメラを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('canvas'),
    });
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, width / height);

    // 箱
    /** @type {THREE.Mesh} */
    let box;

    window.onload = () => {
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        camera.position.set(0, 0, 150);

        addEventListeners();
        addObjects();

        const INTERVAL = 1000 / 60;
        let nextUpdateTime = new Date().getTime() + INTERVAL;
        frameProc();

        function frameProc(){
            const curTime = new Date().getTime();
            if(nextUpdateTime < curTime){
                nextUpdateTime +=  INTERVAL;
                update();
            }
            requestAnimationFrame(() => frameProc());
        }
    }

    // 増加・減少のボタンが押下されているかどうか？
    let pressIncrease = false;
    let pressDecrease = false;

    function addEventListeners(){
        const $increase = document.getElementById('increase');
        const $decrease = document.getElementById('decrease');

        const arr1 = ['mousedown', 'touchstart'];
        const arr2 = ['mouseup', 'touchend'];
        for(let i=0; i<arr1.length; i++){
            $increase?.addEventListener(arr1[i], () => pressIncrease = true);
            $decrease?.addEventListener(arr1[i], () => pressDecrease = true);
        }
        for(let i=0; i<arr2.length; i++){
            $increase?.addEventListener(arr2[i], () => pressIncrease = false);
            $decrease?.addEventListener(arr2[i], () => pressDecrease = false);
        }
        const arr3 = ['touchstart', 'touchend'];
        for(let i=0; i<arr3.length; i++){
            $increase?.addEventListener(arr3[i], (ev) => ev.preventDefault());
            $decrease?.addEventListener(arr3[i], (ev) => ev.preventDefault());
        }
    }

    /** @type {THREE.Group} */
    let group;

    // 箱
    /** @type {THREE.Mesh} */
    let box1, box2;

    function addObjects(){
        // グループを作り、3D空間に追加する
        group = new THREE.Group();
        scene.add(group);

        const geometry = new THREE.BoxGeometry(16, 16, 16);
        const material = new THREE.MeshNormalMaterial();
        box1 = new THREE.Mesh(geometry, material);
        box1.position.x = 16;
        group.add(box1);

        box2 = new THREE.Mesh(geometry, material);
        box2.position.x = -16;
        group.add(box2);
    }

    const $positionX = document.getElementById('position-x');
    const $positionY = document.getElementById('position-y');
    const $positionZ = document.getElementById('position-z');

    const $rotateX = document.getElementById('rotate-x');
    const $rotateY = document.getElementById('rotate-y');
    const $rotateZ = document.getElementById('rotate-z');

    function update() {
        if(pressIncrease){
            if($positionX.checked)
                group.position.x += 0.4;
            if($positionY.checked)
                group.position.y += 0.4;
            if($positionZ.checked)
                group.position.z += 0.4;
            if($rotateX.checked)
                group.rotation.x += 0.04;
            if($rotateY.checked)
                group.rotation.y += 0.04;
            if($rotateZ.checked)
                group.rotation.z += 0.04;
        }
        if(pressDecrease){
            if($positionX.checked)
                group.position.x -= 0.4;
            if($positionY.checked)
                group.position.y -= 0.4;
            if($positionZ.checked)
                group.position.z -= 0.4;
            if($rotateX.checked)
                group.rotation.x -= 0.04;
            if($rotateY.checked)
                group.rotation.y -= 0.04;
            if($rotateZ.checked)
                group.rotation.z -= 0.04;
        }
        renderer.render(scene, camera); // レンダリング
    }
</script>
</body>
</html>