Three-dimensional! Transform with your finger! Three.js draws a 3D graphic of a cube. Every face of the cube has a different color. By tapping on a face of the cube and stretching it, you can stretch the tapped face in that direction.'s game

Click here for free DL of the app version that can save data.

No:8434

2598

←

Prev Next

→

Three-dimensional! Transform with your finger! Thr..ALL
Developer もちきなこ｜Date and time 23/7/16 3:48:41
Build time 19.035 sec｜Game capacity 2.568KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>3D Cube Manipulation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // レンダラーの作成
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// シーンの作成
        const scene = new THREE.Scene();

// カメラの作成
        const camera = new THREE.PerspectiveCamera(
            75, window.innerWidth / window.innerHeight, 0.1, 1000
        );
        camera.position.z = 5;

// 立方体の作成
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const colors = [0xff0000, 0xff9900, 0xffff00, 0x00ff00, 0x00ffff, 0x0000ff];
        const materials = colors.map(color => new THREE.MeshBasicMaterial({ color }));

const cube = new THREE.Mesh(geometry, materials);
        scene.add(cube);

// レンダリングの更新
        function animate() {
            requestAnimationFrame(animate);

cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

renderer.render(scene, camera);
        }
        animate();

// タップした場所に応じて、立方体の面を引き伸ばす
        document.addEventListener('touchstart', function (e) {
            e.preventDefault();

const touchX = e.touches[0].clientX / window.innerWidth * 2 - 1;
            const touchY = -e.touches[0].clientY / window.innerHeight * 2 + 1;
            const vector = new THREE.Vector3(touchX, touchY, 0.5).unproject(camera);

const raycaster = new THREE.Raycaster(
                camera.position,
                vector.sub(camera.position).normalize()
            );

const intersects = raycaster.intersectObject(cube);

if (intersects.length > 0) {
                const faceIndex = intersects[0].faceIndex;
                const face = cube.geometry.faces[faceIndex];

const vertices = cube.geometry.vertices;
                const v1 = vertices[face.a];
                const v2 = vertices[face.b];
                const v3 = vertices[face.c];

v1.x *= 1.2;
                v2.y *= 1.2;
                v3.z *= 1.2;

cube.geometry.verticesNeedUpdate = true;
            }
        });
    </script>
</body>
</html>