禁用 Three.js 中特定对象之间的颜色混合答案

【问题标题】：Disable color blending between specific objects in Three.js禁用 Three.js 中特定对象之间的颜色混合
【发布时间】：2020-06-17 03:13:33
【问题描述】：

我正在为 Three.js 中的 2D 对象开发可视化工具。

就像显示的示例一样，我想使用正交相机渲染一组 2D 形状，因为每个较大的形状都“包含”较小的形状，所以我一直使用 z 坐标以这种方式渲染它们较大的对象呈现在较小的对象后面。

这行得通。但是，我想禁用颜色混合，就好像我不是每次都绘制完整的对象，而是像上面的示例一样绘制它的增量/减量。此外，我希望每个都与现有内容混合，例如下面示例中显示的背景或地图。

问题本质上是：是否可以禁用一组对象之间的颜色混合，同时允许这些对象与其他对象（例如背景）之间的颜色混合？

【问题讨论】：

通过设置renderOrder 将它们从前到后渲染。然后，深度缓冲区将阻止后面的那些在前面已经绘制的地方绘制

标签： graphics three.js rendering transparency color-blending

【解决方案1】：

通过设置它们的renderOrder 从前到后渲染它们。然后，深度缓冲区将阻止后面的那些在前面已经绘制的地方绘制

#c {
  background-image: url(https://i.imgur.com/zYyAndd.jpg);
  background-size: cover;
}

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas, alpha:true});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const geometry = new THREE.CircleBufferGeometry( .5, 32 );

  for (let i = 0; i < 5; ++i) {
    const material = new THREE.MeshBasicMaterial({
      transparent: true,
      opacity: 0.5,
    });
    material.color.setHSL(i / 5, 1, 0.5);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    mesh.position.z = i * -0.1;
    const s = 1 + i * 0.5;
    mesh.renderOrder = i;
    mesh.scale.set(s, s, s);
  }

  renderer.render(scene, camera);
}

main();
</script>

【讨论】：