Question

我有以下逻辑来创建一个应该处理高DPI显示的Three.js R69 WebGL渲染器。它做了很长一段时间，但大约一个星期前，只有一个三个.js页面开始渲染，就像高DPI被正确设置，但我的3D坐标原点成为渲染画布的左上角而不是预期的中心画布。（我可以告诉我的环境没有变化，也许是浏览器自动更新。我在OSX 10.10.1上使用Chrome，FF和Safari进行测试）

// create our renderer:
gCex3.renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true,
                                           devicePixelRatio: window.devicePixelRatio || 1
                                        });
// Three.js R69: I started needing to explicitly set this so clear alpha is 1:
gCex3.renderer.setClearColor( new THREE.Color( 0x000000 ), 1 );
gCex3.rendererDOM = $('#A3DH_Three_wrapper');
gCex3.rendererDOM.append( gCex3.renderer.domElement );
// fbWidth & fbHeight are w,h of a div located within the page:
gCex3.renderer.setSize( gs.fbWidth, gs.fbHeight, true ); // 'true' means update the canvas style

检查最新的R69示例，它们似乎没有对高dpi显示做任何特殊操作。检查WebGLRenderer源，看起来devicePixelRatio逻辑现在嵌入在WebGLRenderer（）函数中。

我在示例中尝试过最小逻辑，特别是：

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( new THREE.Color( 0x000000 ), 1 );
renderer.setSize( gs.fbWidth, gs.fbHeight, true );

我看到了相同的行为：我的坐标系原点是渲染画布的左上角。

请注意，在Chrome中，运行javascript调试器时，在退出上一页时会看到“webgl context lost”事件，但在执行此逻辑之前。在没有WebGL上下文的时候，是否可以创建WebGLRenderer？

用于高DPI的Three.js webgl渲染器显示错误？

0 个答案: