Three.jsライブラリを使用してWebブラウザーで3Dオブジェクトを表示する3Dプロジェクトに取り組んでいます。
問題は:
以下はスクリーンショットです。
モデルの寸法(高さと幅)を設定しているコードの一部を次に示します。この関数は、サイズ変更イベントが発生したときに呼び出されます。
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);
誰かが私にヒントを与えることができますか?私はすでに数日それに取り組んでいますが、今のところ手がかりはありません
最後に、アプリケーションが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);
そして、これは問題を完全に修正しました:)
そのため、キャンバス要素は他のすべての要素と同様にサイズ変更できます。何をしたいのかは、レンダーとカメラにキャンバスのコンテンツのサイズを変更するように指示することです。
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
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
_であることを確認します。それに加えて、すべてを貼り付けることができるはずです。
これらのグーグルについては、サイズ変更を行うヘルパーutilですばやく始めたい場合は、このgithubをチェックしてください: https://github.com/jeromeetienne/threex.windowresize
あなたがしなければならない唯一のことは、bower
経由でそれをインストールし、それを初期化することです:
new THREEx.WindowResize(renderer, camera)