A three.js man change the XYNZ coordinates in rotations with buttons's game

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

No:10634

←

Prev Next

→

A three.js man change the XYNZ coordinates in rot..ALL
Developer User4587｜Date and time 23/8/1 10:47:49
Build time 26.656 sec｜Game capacity 3.72KB｜

Script

Sure! Here's an example of a game implemented as a single HTML file using Three.js, JavaScript, and pictograms for smartphone operation. The game allows you to control a 3D character by rotating it using buttons to change its X, Y, N, and Z coordinates.

To play the game, open the HTML file with a web browser on your smartphone. You will see four buttons labeled "Rotate X+," "Rotate Y+," "Rotate N+," and "Rotate Z+." Each button corresponds to the respective coordinate rotation. Pressing a button will rotate the 3D character accordingly. Note: For the game to display properly, make sure you have an internet connection to load the Three.js library from a CDN.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Character Game</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100%; }
        #controls { position: absolute; top: 10px; left: 10px; }
        button { font-size: 20px; padding: 5px 10px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // Initialize scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// Create 3D character
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const character = new THREE.Mesh(geometry, material);
        scene.add(character);

// Render loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

// Update character's rotation
        function updateRotation(x, y, n, z) {
            character.rotation.x += x;
            character.rotation.y += y;
            character.rotation.z += z;
            character.position.y += n;
        }

// Handle button clicks
        const buttonXPositive = document.createElement('button');
        buttonXPositive.innerHTML = 'Rotate X+';
        buttonXPositive.onclick = function() {
            updateRotation(0.1, 0, 0, 0);
        }
        document.body.appendChild(buttonXPositive);

const buttonYPositive = document.createElement('button');
        buttonYPositive.innerHTML = 'Rotate Y+';
        buttonYPositive.onclick = function() {
            updateRotation(0, 0.1, 0, 0);
        }
        document.body.appendChild(buttonYPositive);

const buttonNPositive = document.createElement('button');
        buttonNPositive.innerHTML = 'Rotate N+';
        buttonNPositive.onclick = function() {
            updateRotation(0, 0, 0.1, 0);
        }
        document.body.appendChild(buttonNPositive);

const buttonZPositive = document.createElement('button');
        buttonZPositive.innerHTML = 'Rotate Z+';
        buttonZPositive.onclick = function() {
            updateRotation(0, 0, 0, 0.1);
        }
        document.body.appendChild(buttonZPositive);

// Adjust scene and camera on window resize
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        window.addEventListener('resize', onWindowResize, false);
    </script>
</body>
</html>
```

To play the game, open the HTML file with a web browser on your smartphone. You will see four buttons labeled "Rotate X+," "Rotate Y+," "Rotate N+," and "Rotate Z+." Each button corresponds to the respective coordinate rotation. Pressing a button will rotate the 3D character accordingly.

Note: For the game to display properly, make sure you have an internet connection to load the Three.js library from a CDN.