Question

我正在寻找一种以半分辨率显示three.js视口的方法（或双倍大小取决于你如何看待它）。

Three.js documentation表示

[Y]你也可以给setSize更小的值，比如window.innerWidth / 2和window.innerHeight / 2，分辨率的一半。这并不意味着游戏只会占据整个窗口的一半，而是看起来有点模糊和扩大规模。

然而，实际结果是视口被缩放到一半大小。

此jsfiddle显示非预期的行为。

查看API有setSize和setViewport方法，但两者都不允许我有一个按比例放大的视口。

这里有一个question and answer，它提供了一种使用CSS的方法，但是如果可能的话，我正在寻找一种非CSS相关的方式。

Answer 1

2pha的答案是正确的，并且已经使用setPixelRatio()方法在threejs中实现，因此您可以编写更少的行。此方法的主要兴趣在于与注释中调用的窗口属性window.devicePixelRatio一致。

如果您关心移动设备/平板电脑设备，这是添加到样板的重要功能。在HTML标题中，您应该拥有以下元标记：<meta name='viewport' content='width=device-width'/>。

如果您没有此标记，则innerWidth和innerHeight值将大于您的设备需求，从而创建更大的帧缓冲区，这会降低您的帧速率。
但是在相反的情况下如果你有这个标签，没有设置像素比率，你的帧缓冲就会太小...... CSS pixel vs screen pixel story。

这就是你在javascript中添加这一行的原因

renderer.setPixelRatio( window.devicePixelRatio );

需要在{}之后调用setSize。

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

Answer 2

不确定是否有更好的方法，但您可以在添加后立即缩放dom元素。

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
document.body.appendChild( renderer.domElement );
renderer.domElement.style.width = renderer.domElement.width * 2 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 2 + 'px';

https://jsfiddle.net/x4p3bcua/4/

虽然这仍然是通过css进行的一轮谈判。

Answer 3

您需要为画布设置 css 样式：

<style>
    canvas { width:100%; height:100%;}
</style>

并将第三个参数设置为 false：

renderer.setSize( renWidth, renHeight, false);

这将禁用函数内画布的硬编码样式，因此画布将使用您自定义的 100% 宽度和高度样式。

在three.js

3 个答案: