ホームページ > 記事 > ウェブフロントエンド > ブラウザが変わったときの適応型コード共有
場合によっては、ブラウザ ページを開いて、現在レンダリングされているモデルを表示します。ただし、ブラウザの幅と高さの変化に適応するようにシーン モデルを設定しないと、問題が発生します。この記事では主にブラウザ変更時に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 つのサンプルエフェクトをアップロードします。
上記は全画面状態で表示した場合の効果、以下はブラウザを直接半分に変更した場合の効果です:
関連する推奨事項:
WeChatアプレットは画像コンポーネント画像を実装し、幅の比率をアダプティブに共有する例
以上がブラウザが変わったときの適応型コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。