Three.js r89添加地面镜像后模型丢失反射问题咨询

我在Three.js r89版本里碰到过完全一样的问题，当时折腾了好一会儿才找到原因——这是Mirror材质的裁剪平面计算在负角度旋转时的适配bug：当你把groundMirror2.rotation.x设为-Math.PI/2（让镜像面朝下作为地面），Mirror内部的裁剪平面（clip plane）没有正确适配这个负旋转方向，导致模型自身的反射被错误地裁剪掉了，但镜像纹理是通过独立的相机渲染的，所以镜像里的反射显示正常；而设正数旋转时，法线方向和裁剪计算逻辑匹配，就不会出现这个问题。

给你几个实测有效的解决方案：

方案1：微调clipBias参数 #

这是最简单的修复方式，把原来的clipBias: 0改成一个极小的负数，修正裁剪平面的偏移，让模型反射重新被捕捉：

var groundMirror2 = new THREE.Mirror( 200, 100, { 
    clipBias: -0.001, // 关键修改
    textureWidth: WIDTH * window.devicePixelRatio, 
    textureHeight: HEIGHT * window.devicePixelRatio, 
    color: 0x777777, 
    recursion: 0 
});
groundMirror2.rotation.x = -Math.PI / 2;
group.add( groundMirror2 );

这个参数的取值不用太大，-0.001到-0.01之间都可以，根据你的场景微调就行。

方案2：通过父容器旋转替代直接旋转Mirror #

创建一个空的容器对象，把Mirror放在容器里，旋转容器而不是Mirror自身，这样Mirror的自身旋转属性保持默认，能避开裁剪计算的bug：

// 创建容器
var mirrorHolder = new THREE.Object3D();
// 创建Mirror
var groundMirror2 = new THREE.Mirror( 200, 100, { 
    clipBias: 0, 
    textureWidth: WIDTH * window.devicePixelRatio, 
    textureHeight: HEIGHT * window.devicePixelRatio, 
    color: 0x777777, 
    recursion: 0 
});
// 添加到容器并旋转容器
mirrorHolder.add(groundMirror2);
mirrorHolder.rotation.x = -Math.PI / 2;
group.add(mirrorHolder);

方案3：手动修正裁剪平面 #

如果上面两个方案都不生效，可以直接手动调整Mirror内部相机的裁剪平面，强制适配旋转后的法线方向：

var groundMirror2 = new THREE.Mirror( 200, 100, { 
    clipBias: 0, 
    textureWidth: WIDTH * window.devicePixelRatio, 
    textureHeight: HEIGHT * window.devicePixelRatio, 
    color: 0x777777, 
    recursion: 0 
});
groundMirror2.rotation.x = -Math.PI / 2;
group.add( groundMirror2 );

// 手动修正裁剪平面
var clipPlane = new THREE.Plane();
clipPlane.normal.copy(groundMirror2.normal).negate();
clipPlane.constant = groundMirror2.position.dot(clipPlane.normal);
groundMirror2.camera.clippingPlanes[0] = clipPlane;

你可以先试方案1，大部分场景下这个小调整就能解决问题。

内容的提问来源于stack exchange，提问作者Piotr Krawczyk