三个带有对象交集的 js 怪异工件答案

【问题标题】：three js weird artifacts with objects intersection三个带有对象交集的 js 怪异工件
【发布时间】：2023-02-02 08:43:52
【问题描述】：

尝试进入三个 js 并在这里和那里遵循一些教程，但我坚持一些我觉得非常基本的东西，我找不到解决方案。

我遇到的问题在下面的 gif 中得到了更好的展示，它是较小球体中的那些奇怪的人工制品，当黄色球体落后于红色球体时也会发生这种情况，只是这次红色球体是出现故障的那个。我尝试了不同的基础材料（phong、标准、基本），还尝试了不透明度和粗糙度以确保我没有透明或反光材料但什么都没有。场景的一些上下文：它只是一个静止不动的大球体 (S)，还有 2 个较小的球体（s1 是两个中较小的，s2 是两个中较大的）围绕它运行。 s1 与 S 表面相切，s2 中心在 S 表面上（因此它一半在 S 内部，一半在 S 外部）。

有任何想法吗？

这是我的渲染器代码：

    var renderer = new THREE.WebGLRenderer({antialias: true},{ alpha: true });
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

这是我的球体代码：

    var geometry = new THREE.SphereGeometry(0.5, 32, 32);
    var material = new THREE.MeshStandardMaterial (
        {
            color:"red"
        }
    );
    var point = new THREE.Mesh(geometry, material);

和一个环境光：

    var light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);

【问题讨论】：

这看起来像 z-fighting。你可以read about it here。解决方案是将对象彼此远离，或将 camera.near 值设置得更高，将 camera.far 值设置得更低，这样您的深度通道就不会在很长的距离内散布得太细。您的相机 near/far 值现在设置为多少？
@Marquizzo 谢谢！就是这样。我的 near 属性太低 (0.1)，但我将其设置为 10 并且没问题。

标签： three.js render visibility intersection artifact

【解决方案1】：

Marquizzo 在他的评论中找到了解决方案： camera.near 属性太低，我不得不调整它。

【讨论】：