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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:8434

3766

←

Prev Next

→

Three-dimensional! Transform with your finger! Thr..ALL
Developer anonymous｜Date and time 70/1/1 9:42:48
Build time unknown 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>