Skip to content

Instantly share code, notes, and snippets.

@sfpgmr sfpgmr/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
three.js - ウィンドウサイズに合わせてゲーム画面を変更する。

スクリーンサイズに合わせてゲーム画面を変更する

  • three.jsでスクリーンサイズに合わせてゲーム画面サイズを変更する
  • ゲーム画面はW 192 × H 256の昔のレトロのピクセル数
  • ゲーム画面を保ったまま、スクリーンサイズにフィットさせる
<!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>
@sfpgmr

This comment has been minimized.

Copy link
Owner Author

sfpgmr commented Jul 17, 2015

update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.