Javascript Three.js调整画布大小

我一直在做一个3D项目，我们使用Three.js库在web浏览器中显示3D对象

问题是：

• 首先，模型显示在一个小dom元素中，或者当浏览器窗口本身很小时
• 然后，当窗口（或dom元素调整大小）时，模型变为像素化

以下是一些屏幕截图：

调整大小之前：

调整大小后：

调整大小后应如何调整： 下面是设置模型尺寸（高度和宽度）的代码部分，如果触发调整大小事件，将调用此函数：

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);

---

有人能给我一个提示吗？我已经做了几天了，但是到目前为止还没有任何线索，所以canvas元素可以像其他元素一样调整大小。您要做的是告诉渲染和摄影机调整画布内容的大小

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

function onWindowResize(){

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

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

}

---

最后，问题得到了解决。实际问题来自于应用程序使用了

THREE.EffectComposer

对象，在类构造函数中创建了一个composer对象，如下所示：

this.composer = new THREE.EffectComposer(this.renderer3D);

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
if(instance.composer)
    instance.composer.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

对于渲染器，编写器需要在事件处理程序函数之后更新大小，如下所示：

this.composer = new THREE.EffectComposer(this.renderer3D);

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
if(instance.composer)
    instance.composer.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

---

这完美地解决了这个问题：）

对于那些谷歌用户来说，如果您想快速开始使用帮助工具util为您调整大小，请查看此github：

您只需通过

bower

安装并初始化它：

new THREEx.WindowResize(renderer, camera)

---

我将Shawn Whinnery的答案应用于React JS：

启动侦听器onMount:

componentDidMount() {
  window.addEventListener('resize', this.handleResize, false)
}

删除侦听器onUnmount（因为我们喜欢垃圾收集）：

安装处理程序功能：

handleResize = () => {
  this.camera.aspect = window.innerWidth / window.innerHeight
  this.camera.updateProjectionMatrix()
  this.renderer.setSize(window.innerWidth, window.innerHeight)
}

胖箭头语法用于避免绑定此。如果您有以下内容，代码将不起作用：

handleResize（）{…}

，但如果您将其添加到构造函数中，代码当然会起作用：

this.handleResize = this.handleResize.bind(this)

---

最后注意：确认您的相机是

this.camera

，而渲染器是

this.renderer

。除此之外，您还应该能够将其全部粘贴进去。

这非常简单。即使调整了浏览器窗口的大小，该three.js代码也不会更改

代码：

//简单多维数据集示例
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（50，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:“rgb（255,0,0）”}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var edges=新的三个.EdgesHelper（立方体，“rgb（0，0，0）”）；
edges.material.linewidth=5；
场景。添加（边）；
函数animate（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；
函数rot（）{
请求动画帧（rot）；
旋转角度x+=0.01；
旋转.y+=0.01；
}
腐烂（）；
//调整浏览器大小时，这不会改变它的大小，但请使用css并更正它。

//这是代码。使用div和javascript都不起作用
.代码{
浮动：左；
宽度：100vw；/*全屏*/
高度：100vh；
}

---

尝试使用antialias属性解决50-70%的像素化问题

---

e、 g:

var renderer=new THREE.WebGLRenderer（{antialas:true}）
它已经完成了，你可以在我在代码中共享的代码snipet中看到它。我只是想为可能有此问题的任何其他人将答案与问题分开。很酷的建筑顺便说一句。好的，谢谢你的帮助：），事实上问题现在已经解决了，我会尽量找时间写一个答案。初学者不要被这里的窗口绊倒，你可能正在使用你自己的容器作为渲染器，将该容器替换为windowAFAIK
setSize
为您更改画布
宽度
/
高度
（渲染分辨率），并为
glViewport
使用新的大小。你能仔细检查一下instance.dom.clientWidth/Height是否正在改变吗？看起来画布正在改变大小，而不是内部分辨率。此方法最简单。只需包含js文件并初始化大小调整器。工作非常完美。这里的“像素化”是由于子采样，因为渲染器没有放大到新的窗口大小，而不是由于锯齿。