网站维护 关站 seo,我的世界做图的网站,手机网站下拉列表,网页网页设计班本主题讨论透视相机以及如何为远距离环境设置合适的视锥体。 推荐#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 透视相机是一种投影模式#xff0c;旨在模仿人类在现实世界中看待事物的方式。 这是渲染 3D 场景最常用的投影模式。 - three.js
如果你看一下 Three.js 文档…本主题讨论透视相机以及如何为远距离环境设置合适的视锥体。 推荐用 NSDT编辑器 快速搭建可编程3D场景 透视相机是一种投影模式旨在模仿人类在现实世界中看待事物的方式。 这是渲染 3D 场景最常用的投影模式。 - three.js
如果你看一下 Three.js 文档中的透视相机构造函数它会是这样的
new THREE.PerspectiveCamera( fov, aspect, near, far )其中
fov相机视野aspect 相机宽高比near相机近平面far相机远平面。
这些参数共同定义了相机的视锥体 - 3D 场景的区域将被渲染并出现在屏幕上。
例如
const camera new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );基本上你可以将 fov、near、far 设置为你想要的任何范围。 例如将 fov 调整到 10 或 20 左右你将很容易看到物体的正面或者实际上所有内容都放大到屏幕上而如果将 fov 设置为 100 中的 90 左右则场景中的所有内容都会移得很远。
那么 near 和 far 呢
当然你也可以设置近平面和远平面的任意值但如果近远范围很大那么近距离时会出现更多的 z-fighting而如果范围太小则会破坏场景。
理想情况下如果你设置 near 0.01那么far应该是1000或者 near 1那么你可以进一步设置 far 10000。
但是如果你确实需要像长距离这样的东西可以使用 near 0.0000000001 和 far 10000000000000。但在这种情况下您可能需要另一个选项来配置 WebGLRenderer。
为什么 原因是 GPU 的精度有限无法确定某个物体是在其他物体的前面还是后面。 这种精度分布在近处和远处。 更糟糕的是默认情况下靠近相机的精度是详细的而远离相机的精度是粗略的。 这些单位从近开始随着接近远而慢慢扩展。 - Threejsfundamentals.org 为了说明这种情况我们有一个带有 3D 模型的简单场景相机、渲染器的设置如下
// camera
this.camera new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.00000001,10000
);
this.camera.position.set(10, 6, 10);// renderer
this.renderer new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.physicallyCorrectLights true;
this.renderer.outputEncoding THREE.sRGBEncoding;你认为会发生什么
3D 模型出了问题你可以看到纹理全部损坏。 这是 z -fighting的示例其中计算机上的 GPU 没有足够的精度来确定哪些像素在前面、哪些像素在后面。
有一个解决方案是你需要告诉 Three.js 使用不同的方法来计算哪些像素在前面哪些像素在后面。 我们可以通过在 WebGLRenderer 构造函数中启用 logarithmicDepthBuffer 来做到这一点。
所以我们的渲染器现在看起来像这样
// renderer
this.renderer new THREE.WebGLRenderer({ antialias: true,logarithmicDepthBuffer: true
});
// ...检查结果它应该可以工作…
logarithmicDepthBuffer 显然可以解决这个问题但并不总是建议使用它因为它可能比标准解决方案慢尤其是在大多数移动设备中。
这意味着你应该始终调整近距和远距以满足你的需要。 现在请注意如果想绘制一个距离很远的巨大场景而不破坏场景中的任何对象你可以尝试一下还有一个替代选项。
希望这可以帮助 原文链接相机参数及z-fighting解决方案 — BimAnt
