27

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

私はWindows7でGoogleChrome18を使用しており、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を調整して、マージンとパディングを削除しようとしました。これは、作成されるキャンバス要素と同じですが、何もありません。画面サイズをページにエコーし、JavaScriptalert()関数を作成してウィンドウの幅と高さをチェックし、実行時の操作中に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());

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

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

4

4 に答える 4

61

表示を設定するだけです：ブロック; CSSのcanvas要素

この<canvas>要素は、mozilla開発者ネットワークによると公式にはブロックレベルの要素です。インライン要素とブロック要素の間にあるもの。彼らは書きます：

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

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

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

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}
于 2013-03-26T09:30:50.730 に答える
1

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

'window.innerWidth'と'window.innerHeight'は常に正確であるとは限らないため、TysonMatanichによる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;
    }
于 2013-03-24T03:14:28.680 に答える
0

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

canvas {
    vertical-align: top;
}

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

于 2014-02-15T14:24:46.587 に答える
0

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

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
  }
于 2017-12-14T14:03:58.180 に答える