解説
「ビューポート」はのぞき窓という意味で、コンピューターでは表示領域を指します。ビューポートは多くの場合、長方形です。
ウェブページや3DCGなどでは、コンテンツをビューポートを通して見ます。
ウェブページでは、HTMLのタグとしてビューポートの設定をおこなうことができます。スマートフォンでは、これらの値を参考にして表示を調整します。
<meta name="viewport" content="width=device-width, initial-scale=1" />
サンプル
「ビューポート」のサンプルです。3Dで、大小2つのビューポートを重ねて表示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>「ビューポート」のサンプル</title>
<style>
html, body { margin: 0; width: 100%; height: 100%; }
#container { width: 100vw; height: 50vw; position: relative; }
</style>
</head>
<body>
<div id="container"></div>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js';
const container = document.getElementById('container');
const w = container.clientWidth;
const h = container.clientHeight;
// レンダラー
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
renderer.setScissorTest(true);
container.appendChild(renderer.domElement);
// シーン
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x2060a0);
// オブジェクト
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1.5, 1.5, 1.5),
new THREE.MeshStandardMaterial({ color: 0xaaff00 })
);
scene.add(cube);
// 光源
const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(3, 6, 5);
scene.add(light);
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
// カメラ
const camera = new THREE.PerspectiveCamera(20, w / h, 0.1, 100);
camera.position.set(-5, 5, 2);
camera.lookAt(0, 0, 0);
// アニメーション
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
// メインのビューポート
renderer.setViewport(0, 0, w, h);
renderer.setScissor(0, 0, w, h);
renderer.render(scene, camera);
// 右上のビューポート
renderer.setViewport(w * 0.6, h * 0.6, w * 0.4, h * 0.4);
renderer.setScissor(w * 0.6, h * 0.6, w * 0.4, h * 0.4);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
出力結果
275_ss.png
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
