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

場合によっては、ブラウザ ページを開いて、現在レンダリングされているモデルを表示します。ただし、ブラウザの幅と高さの変化に適応するようにシーン モデルを設定しないと、問題が発生します。この記事では主にブラウザ変更時に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 サイトの他の関連記事を参照してください。