Three.js Mesh 从前面的对象继承颜色答案

【问题标题】：Three.js Mesh to Inherit Color from in-front objectsThree.js Mesh 从前面的对象继承颜色
【发布时间】：2021-08-06 07:17:39
【问题描述】：

场景

我正在尝试让网格从物理上位于前面的其他网格继承颜色

示例：

Mesh A       Mesh B       Camera
(white)       (red)

              +---+         |\
  []          |   |      << | ]
              +---+         |/

我不希望网格 B 完全可见，但我希望网格 A 为红色，网格 B 会阻挡网格 A 的视图。我能想到的是这是一种颜色叠加。

原型

I made a three.js prototype 两个平面部分阻挡了白色球体的视野。我希望能够将计划变成颜色叠加，以便球体显示红色、白色和蓝色（意外的美国国旗颜色）

问题

有没有办法用三个来做到这一点？我不习惯这种做事方式，但似乎有可能，只是我还没有找到正确的文档。

【问题讨论】：

标签： three.js overlay color-blending

【解决方案1】：

检查小提琴solutionLink，红色和蓝色的两个平面是不可见的，光线投射器正在从相机拍摄到场景，当红色或蓝色平面被击中并且球体也被击中时我改变了颜色球

const raycaster = new THREE.Raycaster();
const redMat = new THREE.MeshBasicMaterial({color: 'red'});
const blueMat = new THREE.MeshBasicMaterial({color: 'blue'});
function raycastFromCameraAndUpdateSphereColor() { // place this in the render loop
    raycaster.setFromCamera( new THREE.Vector2(), camera );
    const intersects = raycaster.intersectObjects( scene.children );
    if (intersects.length > 1) {
      // name the object to identify it
      if (intersects[0].object.name === 'redPlane') {
      intersects[1].object.material = redMat;
      }
      // name the object to identify it
      if (intersects[0].object.name === 'bluePlane') {
      intersects[1].object.material = blueMat;
      }
    }
}

【讨论】：

【解决方案2】：

您可以将每个平面的材质的混合模式设置为blending: THREE.MultiplyBlending，这样平面的颜色就会与其后面的项目相乘。

看in action here。

但是，如果您希望它仅应用于平面和球体重叠的部分，则需要编写一个自定义的后处理通道来消除背景。或者您可以将背景颜色设置为#000，因为任何颜色乘以黑色都会产生黑色。

【讨论】：

在 Multiply 上平稳移动！这完全跳过了我的想法。我最终认为我将不得不使用单个几何对象创建多个球体网格，然后使用平面将某些球体剪辑到视图中。你怎么看？