Отключить смешение цветов между указанными c объектами в Three. js - PullRequest
Новая
       40

Отключить смешение цветов между указанными c объектами в Three. js

0 голосов
/ 04 марта 2020

Я разрабатываю инструмент визуализации для 2D-объектов в Three. js.

Как и в показанном примере, я хочу взять набор 2D-фигур, визуализированных камерой orthographi c, и, поскольку каждая большая фигура «содержит» меньшие, я использовал координату z, чтобы визуализировать их таким образом, чтобы более крупные объекты отображались позади меньших.

Это работает. Тем не менее, я хочу отключить смешивание цветов, как если бы я не рисовал полные объекты каждый раз, а вместо этого рисовал их приращения / убывания, как в примере выше. Кроме того, я хочу, чтобы каждый смешивался с существующим содержимым, таким как фон или карта, показанная в примере ниже.

Вопрос принципиально: возможно ли отключить смешение цветов между набором объектов, одновременно позволяя смешивание цветов между этими объектами и другими (например, фон)?

Example

1 Ответ

1 голос
/ 04 марта 2020

Визуализируйте их спереди назад, установив их 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>
...