Sample game in three.js's game

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

No:8368

1266

←

Prev Next

→

Sample game in three.js
Developer User4160｜Date and time 23/7/15 14:54:25
Build time 14.384 sec｜Game capacity 1.867KB｜

Script

以下は、three.jsを使用して作成したサンプルゲームの実装例です。

上記のコードは、three.jsを使用して立方体を表示するサンプルゲームです。立方体は回転します。お使いのWebブラウザで実行して、立方体の回転を確認することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下は、three.jsを使用して作成したサンプルゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
    <script>
        // ゲームの処理を記述
        function init() {
            // レンダラーの作成
            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();
            const material = new THREE. MeshNormalMaterial({color: 0x6699FF});
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

// ゲームループ
            function animate() {
                requestAnimationFrame(animate);

// オブジェクトの回転
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

// レンダリング
                renderer.render(scene, camera);
            }

// ゲーム開始
            animate();
        }

// 初期化
        init();
    </script>
</body>
</html>
```

上記のコードは、three.jsを使用して立方体を表示するサンプルゲームです。立方体は回転します。お使いのWebブラウザで実行して、立方体の回転を確認することができます。