web-dev-qa-db-ja.com

Three.jsフルスクリーンの問題

Three.js APIを読み、StackOverflowの質問を読み、firebugとchromeのデバッガーを使用してコードをデバッグし、可能な限りすべてを削除しましたが、それでもこの苛立たしいフルスクリーンエラーが発生します、レンダラーのビューポートが画面よりも大きいため、スクロールバーが表示されます。これは、レンダリングやその他の操作に影響を与えない目に見えるエラーです。スクロールバーが表示されずに、使用可能な画面領域と一致するようにビューポートのサイズを制御しようとしています。

私はWindows7でGoogle Chrome 18を使用しており、Three.js APIを使い始めたばかりですが、過去にOpenGLなどを使用したことがあるため、グラフィックスAPIに慣れていません。

このコードを実行しようとすると（これはgithubメインページに表示されるデフォルトの例です）：

_var camera, scene, renderer,
geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;
    scene.add( camera );

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}
_

正常にレンダリングされ、赤いワイヤーフレームボックスが回転しているのがわかりますが、レンダラーのビューポートが大きすぎて、使用可能な画面サイズよりも大きいため、スクロールバーが表示されます。コードは_window.innerWidth_と_window.innerHeight_を使用して、レンダラーのアスペクト比と幅/高さを設定しますが、どこかで20〜30の余分なピクセルを取得し、それらを下部とページの右側？

Body要素のCSSを調整して、マージンとパディングを削除しようとしました。これは、作成されるcanvas要素と同じですが、何も行われません。画面サイズをページにエコーし、JavaScript alert()関数を作成してウィンドウの幅と高さをチェックし、ランタイム操作中にThree.js APIに渡されるのを監視しましたが、エラーが発生しました残り：キャンバスレンダリングオブジェクトは、画面サイズよりわずかに大きいサイズにサイズ変更されています。問題を修正するのに最も近いのは、次のようなことです。

_var val = 7;
//Trims the window size by val
function get_width(){return window.innerWidth - val;}
function get_height(){return window.innerHeight - val;}

//... Code omitted for brevity

camera = new THREE.PerspectiveCamera( 75, get_width() / get_height(), 1, 10000 );

//... Code omitted for brevity 

render.setSize(get_width(), get_height());
_

これは、レンダラーのサイズをウィンドウの境界内に収めるために機能しますが、ポイントにすぎません。 valを7未満に下げると、たとえば6以下の場合、レンダラーのサイズが元に戻り、画面よりも20ピクセル（約）大きくなり、スクロールバーが表示されますか？

何か考えやアイデアはありますか？

javascripthtmlfullscreenhtml5-canvasthree.js
25
hypervisor666

CSSのcanvas要素にdisplay：block;を設定するだけです

<canvas>要素は、公式にはMozilla開発者ネットワークによるものですブロックレベルの要素。インライン要素とブロック要素の間にあるもの。あの人たちは書く：

ブラウザは通常、要素の前後の両方に改行を含むブロックレベルの要素を表示します。

ただし、要素のレンダリングはブラウザによって異なる可能性があるため、正しい動作を確実に得るには、CSSでdisplay: inline;またはdisplay: block;を明示的に設定するのが最善です。

したがって、問題を解決するには、CSSファイルの表示値をブロックに設定するだけです。

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}
57
Wilt

CSSの本文の余白を削除し、オーバーフローを非表示にします。

body{
  margin: 0px;
  overflow: hidden;
}
7
Juan Mellado

I.ビューポートサイズの精度

'window.innerWidth'と 'window.innerHeight'は常に正確であるとは限らないため、Tyson MatanichによるviewportSize.jsの使用をお勧めします。

ダウンロード： https://github.com/tysonmatanich/viewportSize

デモ： http://tysonmatanich.github.com/viewportSize/

これが作者からの詳細な説明です：

「ほとんどの人は、CSSメディアクエリで使用されるビューポート幅を常に正確に報告するとは限らないwindow.innerWidth、document.documentElement.clientWidth、または$（window）.width（）に依存しています。たとえば、WebKitブラウザはCSSのサイズを変更しますスクロールバーが表示されているときのビューポート。他のほとんどのブラウザは表示されません。window.innerWidthはスクロールバーの状態に関係なく一定であるため、ChromeまたはSafariで使用するのは適切なオプションではありません。さらに、 、Internet Explorer 6、7、および8はwindow.innerWidthをサポートしていません。一方、document.documentElement.clientWidthはスクロールバーの状態に基づいて変化するため、Internet Explorer、Firefox、またはOperaには適していません。」

例：

var viewportWidth  = viewportSize.getWidth(),
    viewportHeight = viewportSize.getHeight(),
    viewportAspect = viewportWidth / viewportHeight;

camera = new THREE.PerspectiveCamera( 75, viewportAspect, 1, 10000 );

II。とらえどころのない要素

プログラムで作成された要素を探します（「createElement」を介して）。彼らは見逃しがちです。

ChromeのインスペクターまたはFirebugを使用して、見逃した可能性のある他の要素がないかどうかを確認します。先週のコードの奥深くに埋もれていた、完全に忘れていたものをよく目にし、以前はどうしてそれを見逃していたのだろうと思います。

III。ハードリセット

最後に、徹底的に、ハードリセットを試すことができます。エリックマイヤーの古典的なリセットは一般的に最も徹底的であると考えられています（ http://meyerweb.com/eric/tools/css/reset/index.html ）が、私は個人的に「凝縮されたマイヤーリセット」を好みます'（昨年いつかウェブ上に登場した、作者不明）：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
    padding: 0;
    margin: 0;
    }
fieldset, img { 
    border: 0;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
ol, ul {
    list-style: none;
    }
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
    }
caption, th {
    text-align: left;
    }
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
    }
q:before, q:after {
    content: '';
    }
abbr, acronym { 
    border: 0;
    }
1
David Scott Kirby

私にとってこの修正された問題。常にキャンバスをフルスクリーンに保ちます。

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
  }
0
paraplu

Cssでは、これもトリックを実行する必要があります。

canvas {
    vertical-align: top;
}

当然、上からのパディング、マージン修正も必要です

0
ovirta