Three.js: 调整大小和长宽比的窗口

您还需要更新相机：

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

function onWindowResize(){

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

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

}

我有一个“ div”，它的动态尺寸会在调整窗口大小或隐藏页面中的其他元素时重新调整大小。 调整“ div”容器的大小后，我需要画布完全填充div。 我正在使用$（'＃center-pane'）。width（）和.height（）初始化网络，该网络正确地将“中心” div填充为所需的尺寸，但无法调整大小。

从理论上讲，我可以使用相同的功能来处理这两种调整大小的方案。 调用函数时，camera.updateProjectionMatrix（）似乎出现问题。 我在函数内有一个alert（），它会在调整大小时触发，因此我只能确定它的相机和渲染器。

我还需要画布中的所有对象都可以单击，这是我具有的功能，但是需要更新，对吗？
我正在使用CombinedCamera。 （我找不到关于它的任何文档，只是一个例子）；

这是我正在使用的布局，或多或少： http :
我需要一个调整大小功能来动态填充“ ui-center-pane”而无需调整大小按钮

谢谢，
布伦特

很抱歉，但我不明白问题出在哪里，您可以尝试简化解释吗？

好的，对不起。

1. 您能说明我或将其链接到CombinedCamera文档吗
2. 调整大小后，错误提示“没有方法updateProjectionMatrix（）”
3. 调整大小后，我应该如何以及全部更新。 （此外，它如何影响相交光线以进行处理事件）

布伦特

1您能否解释或链接我到CombinedCamera文档

那是唯一的东西：
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2调整大小后，错误地指出“没有方法updateProjectionMatrix（）”

当我转到http://layout.jquery-dev.net/demos/simple.html并调整页面大小时，我看不到此类错误。 我只看到Uncaught TypeError: Object #<Object> has no method 'getCookie'

3调整大小后，我应该如何以及全部更新。 （此外，它如何影响相交光线以进行处理事件）

您应该更新相机的宽高比（宽度/高度）。 并为渲染器设置新的大小。 根据调整大小对光线的影响，请阅读＃988。

camera.aspect =宽度/高度; 工作正常，但是camera.updateProjectionMatrix（）引发错误。 它不应该与我的布局有关，而仅与onWindowResize（）函数有关。

UI-Layout链接就是他们的示例。

您可以共享代码或实时链接吗？ camera绝对具有updateProjectionMatrix()方法。

这是我的存储库：
https://github.com/BioInfoBrent/BIOINFORMATICS
文件：
BIOINFORMATICS / js / networkMain.js

该项目目前处于零散状态，在学期中期进行了重写。 最初的项目是由一个大的“ SWITCH”语句控制的，我正在取消该过程。

我将在本周结束时完成架构，这将腾出大量时间在项目的实际THREE.js方面工作。 我将再提出几个问题，并在一两天内就能更清楚地指导和解释我的问题。

知道了 CombinedCamera相机没有updateProjectionMatrix() 。

@ zz85 ：最好在cameraO和cameraP上同时向CombinedCamera调用updateProjectionMatrix() $$$的updateProjectionMatrix()方法？

谢谢！ 我会检查一下。 我的服务器上有我的项目。
地址： http :
-顶部的“网络”按钮当前是唯一的工作部分。

谢谢！

以下为我解决了它：

camera.aspect = 1;
camera.updateProjectionMatrix（）;
renderer.setSize（window.innerWidth，window.innerHeight）;

我正在使用版本66并打电话

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

function onWindowResize(){

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

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

}

不适用于CombinedCamera 。 相反，我不得不做类似的事情

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

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

}

我想在反应三根光纤中调整毛刺的大小