如何使用可變屏幕尺寸管理WebGL（THREE.js）？

是否有任何方法來管理網格的大小和位置相應的顯示大小。如何使用可變屏幕尺寸管理WebGL（THREE.js）？

我在做什麼是一個簡單的動畫顯示，這將有相機變焦和場景/攝像機位置的變化。

如果屏幕尺寸是不同網格定位和網目尺寸所有人都走錯了..

我不知道如何利用這個控制？

如何找到，如果在屏幕上的網格位置？

來源

2013-03-07 Baskar.M

我的直覺是，有人聰明是要一起去，給你，你真的想（像如何移動相機，使物體停留在正確的位置/大小）的解決方案，但這裏有一些直接回答你的可能有幫助的問題。

你可以通過使比例window.innerWidth和window.innerHeight的一些功能管理網目尺寸。

要確定網格在屏幕上，你可以使用下面的代碼。它將3D空間中的網格位置投影到瀏覽器中的2D空間。此外，一定要調用camera.updateMatrixWorld（）後，移動相機或改變你在看什麼 - 否則你會得到不可思議的結果（感謝WestLangley的提示）。如果vector.x> window.innerWidth或vector.x> window.innerHeight，則該對象位於屏幕的可視區域之外。

function toXYCoord (object) { 
    var vector = projector.projectVector(object.position.clone(), camera); 
    vector.x = (vector.x + 1)/2 * window.innerWidth; 
    vector.y = -(vector.y - 1)/2 * window.innerHeight; 
    return vector; 
}

來源

2013-03-07 22:20:32 kronuus

謝謝kronuus，我會試一試 – 2013-03-08 03:29:40

你想要做的是檢查或者在屏幕上調整大小，或在下面的例子中，我作爲一個容器，當我調整DIV（使用一個「桶」格... programmatic-盟友或以其他方式），我只是請確保調用onBucketResize（）

function onBucketResize() { 
    camera.aspect = bucket.clientWidth/bucket.clientHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(bucket.clientWidth, bucket.clientHeight); 
}

設置，你可以使用類似：

bucket.addEventListener('resize', onBucketResize, false);

也許

document.addEventListener('resize', onBucketResize, false);

無論是適當:)

讓我知道，如果這有助於！

來源

2013-03-09 23:18:35

如何使用可變屏幕尺寸管理WebGL（THREE.js）？

回答

相關問題