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

Question

我正在 Three.js 中开发二维对象的可视化工具。

如所示示例，我想采用正交相机渲染的一组 2D 形状，并且因为每个较大的形状 "contains" 较小的形状，我一直使用 z 坐标来渲染它们以这样一种方式，即较大的对象在较小的对象后面呈现。

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

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

Answer 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>

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

Disable color blending between specific objects in Three.js

graphics

three.js

rendering

transparency

color-blending