与three.js重叠视口

我正在尝试使摄像机(图形用户界面摄像机)在场景摄像机上方渲染。我的想法是将gui摄像机设置为透明背景,因此可以通过它进行透视,但是它没有按我预期的那样工作。

我定义了渲染器,如下所示:

renderer = new THREE.WebGLRenderer({antialias: true,alpha: true});
renderer.setSize(window.innerWidth,window.innerHeight);

我正在尝试这样渲染:

// Render Main Camera
renderer.setClearColor(0x000000,1);
renderer.render(scene,sceneCamera);

// Render GUI Camera
renderer.setClearColor(0x000000,0);
renderer.render(scene,guiCamera);

我以这个https://threejs.org/examples/webgl_multiple_views.html为例,介绍了多个视口,但由于它们的视口没有重叠,因此有所不同。

谢谢。

hanguofeng2000 回答:与three.js重叠视口

详细说明评论。默认情况下,三个将在调用.render()之前清除帧缓冲区。因此,如果多次调用它,效果就好像只调用了最后一个一样。

如果您设置renderer.autoClear = false,则将禁用此功能。例如,如果移动相机,您会看到条纹,因为来自不同框架的对象被一个一个地画在另一个上。

因此,在第一次渲染之前调用renderer.clear()可以使您通过多次.render()调用来绘制同一帧。

使用const guiScene = new Scene()之类的东西并将UI对象放入其中可能是有意义的。

本文链接:https://www.f2er.com/3135819.html

大家都在问