ホームページ >ウェブフロントエンド >jsチュートリアル >ブラウザが変わったときの適応型コード共有

ブラウザが変わったときの適応型コード共有

小云云
小云云オリジナル
2018-01-31 14:57:441964ブラウズ

場合によっては、ブラウザ ページを開いて、現在レンダリングされているモデルを表示します。ただし、ブラウザの幅と高さの変化に適応するようにシーン モデルを設定しないと、問題が発生します。この記事では主にブラウザ変更時にThree.jsを適応させる方法をサンプルコードを通して詳しく紹介していますので、お役に立てれば幸いです。

ブラウザのサイズ変更に合わせてシーンが適応する場合は、ウィンドウのサイズ変更イベント、つまりブラウザ変更イベントを監視する必要があります。


window.onresize = function(){}

または、addEventListener イベントを使用します


window.addEventListener("resize",function(){})

イベントのリスニングが成功した後、変更後にトリガーする必要がある式を記述する必要があります:


//窗口变动触发的函数 
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}

上記は主にカメラの比率とレンダリング 現在の効果は、デバイスの比率を調整することによって実現されます。

前のセクションで使用したコードはアップロードされませんが (必要な場合はここをクリックしてください)、2 つのサンプルエフェクトをアップロードします。


上記は全画面状態で表示した場合の効果、以下はブラウザを直接半分に変更した場合の効果です:


関連する推奨事項:

に基づいて適応高さを反応させる幅の例の共有

モバイルWebページのコンテンツをアダプティブにする方法

WeChatアプレットは画像コンポーネント画像を実装し、幅の比率をアダプティブに共有する例

以上がブラウザが変わったときの適応型コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。