web-dev-qa-db-ja.com

Three.jsキャンバスのサイズ変更

Three.jsライブラリを使用してWebブラウザーで3Dオブジェクトを表示する3Dプロジェクトに取り組んでいます。

問題は：

  • 1つ目は、モデルが小さなdom要素に表示されるか、ブラウザウィンドウ自体が小さい場合です。
  • その後、ウィンドウ（またはdom要素のサイズが変更される）で、モデルはピクセル化されます

以下はスクリーンショットです。

サイズ変更前：

enter image description here

サイズ変更後：

enter image description here

サイズ変更後の状態：

enter image description here

モデルの寸法（高さと幅）を設定しているコードの一部を次に示します。この関数は、サイズ変更イベントが発生したときに呼び出されます。

console.log("domChanged fired")

instance.domBoundingBox = instance.dom.getBoundingClientRect();
instance.domCenterPos.x = instance.domBoundingBox.width / 2 + instance.domBoundingBox.left;
instance.domCenterPos.y = instance.domBoundingBox.height / 2 + instance.domBoundingBox.top;

var width = instance.dom.clientWidth, height = instance.dom.clientHeight;
instance.domWidthHalf = width / 2, instance.domHeightHalf = height / 2;

// TODO: fire event to expose it to site developers

// here we should update several values regarding width,height,position
if(instance.cameraReal) {
    instance.cameraReal.aspect = instance.dom.clientWidth / instance.dom.clientHeight;
    instance.cameraReal.updateProjectionMatrix();
}

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

誰かが私にヒントを与えることができますか？私はすでに数日それに取り組んでいますが、今のところ手がかりはありません

javascriptthree.js
33
Abu Romaïssae

最後に、アプリケーションがTHREE.EffectComposerオブジェクト、クラスコンストラクターでcomposerオブジェクトは次のように作成されました。

this.composer = new THREE.EffectComposer(this.renderer3D);

したがって、レンダラーの場合、composer=は、次のようなイベントハンドラー関数の後にサイズを更新する必要があります。

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
if(instance.composer)
    instance.composer.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

そして、これは問題を完全に修正しました:)

9
Abu Romaïssae

そのため、キャンバス要素は他のすべての要素と同様にサイズ変更できます。何をしたいのかは、レンダーとカメラにキャンバスのコンテンツのサイズを変更するように指示することです。

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}
81
Shawn Whinnery

React JS：

OnListenerでリスナーを開始します。

_componentDidMount() {
  window.addEventListener('resize', this.handleResize, false)
}
_

リスナーonUnmountを削除します（ガベージコレクションが好きなため）：

_componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize, false)
}
_

ハンドラー関数のインストール：

_handleResize = () => {
  this.camera.aspect = window.innerWidth / window.innerHeight
  this.camera.updateProjectionMatrix()
  this.renderer.setSize(window.innerWidth, window.innerHeight)
}
_

太い矢印構文は、thisのバインドを回避するために使用されます。このコードはhandleResize() { ... }があると機能しませんが、もちろん、コンストラクタにこれを追加すると機能します。

_this.handleResize = this.handleResize.bind(this)
_

最終ノート：カメラが_this.camera_であり、レンダラーが_this.renderer_であることを確認します。それに加えて、すべてを貼り付けることができるはずです。

5
agm1984

これらのグーグルについては、サイズ変更を行うヘルパーutilですばやく始めたい場合は、このgithubをチェックしてください： https://github.com/jeromeetienne/threex.windowresize

あなたがしなければならない唯一のことは、bower経由でそれをインストールし、それを初期化することです：

new THREEx.WindowResize(renderer, camera)
2
polyclick