- three.jsでスクリーンサイズに合わせてゲーム画面サイズを変更する
- ゲーム画面はW 192 × H 256の昔のレトロのピクセル数
- ゲーム画面を保ったまま、スクリーンサイズにフィットさせる
Last active
April 4, 2024 11:47
-
-
Save sfpgmr/affd4145baae4c32b76c to your computer and use it in GitHub Desktop.
three.js - ウィンドウサイズに合わせてゲーム画面を変更する。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>画面サイズにゲーム画面をフィットさせる</title> | |
| <meta name="keywords" content="WebGL,HTML5,three.js" /> | |
| <meta name="description" content="WebGL,HTML5,three.js" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> | |
| <meta charset="UTF-8"> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script> | |
| <style> | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 4px; | |
| padding: 0; | |
| border: 0; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #console { | |
| margin-left: auto; | |
| margin-right: auto; | |
| border: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| window.addEventListener('load', | |
| function () { | |
| const WIDTH = 192; | |
| const HEIGHT = 256; | |
| var screen_width; | |
| var screen_height; | |
| function calcScreenSize() { | |
| screen_width = document.body.clientWidth - 8; | |
| screen_height = document.body.clientHeight - 8; | |
| if (screen_width >= screen_height) { | |
| screen_width = screen_height * WIDTH / HEIGHT; | |
| } else { | |
| screen_height = screen_width * HEIGHT / WIDTH; | |
| } | |
| } | |
| calcScreenSize(); | |
| var renderer = new THREE.WebGLRenderer({ antialias: false /*, sortObjects: true */ }); | |
| renderer.setSize(screen_width, screen_height); | |
| renderer.setClearColor(0x000000, 1); | |
| renderer.domElement.id = 'console'; | |
| renderer.domElement.style.zIndex = 0; | |
| document.body.appendChild(renderer.domElement); | |
| renderer.clear(); | |
| // カメラを工夫し、Z座標が0の時座標指定が仮想画面サイズの位置となるようにする | |
| var camera = new THREE.PerspectiveCamera(90, WIDTH / HEIGHT, 0.1, 1000); | |
| camera.position.z = HEIGHT / 2; | |
| var scene = new THREE.Scene(); | |
| var geometry = new THREE.PlaneGeometry(4, 4); | |
| var material = new THREE.MeshBasicMaterial({ color: 0xffffff }); | |
| var rect = new THREE.Mesh(geometry, material); | |
| var x = 0; | |
| var y = 0; | |
| var dx = 2; | |
| var dy = 2; | |
| window.addEventListener('resize', function () { | |
| calcScreenSize(); | |
| renderer.setSize(screen_width, screen_height); | |
| }); | |
| scene.add(rect); | |
| function render() { | |
| requestAnimationFrame(render); | |
| renderer.render(scene, camera); | |
| x += dx; | |
| y += dy; | |
| if (x > (WIDTH / 2) || x < (-WIDTH / 2)) { | |
| dx = -dx; | |
| x += dx; | |
| } | |
| if (y > (HEIGHT / 2) || y < (-HEIGHT / 2)) { | |
| dy = -dy; | |
| y += dy; | |
| } | |
| rect.position.x = x; | |
| rect.position.y = y; | |
| } | |
| render(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
update