Question

两个平面堆叠在一起，两者之间有一定距离，两者都启用了透明度。顶部平面的透明度不符合预期。移动鼠标（轨迹球）时，有时您无法看到通过上平面的最低平面。

请在此处查看问题：EXAMPLE CODE

代码：

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 500;
  var renderer = new THREE.WebGLRenderer({
      antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.sortObjects = false;
  document.body.appendChild(renderer.domElement);

  var light = new THREE.AmbientLight(0xFFFFFF);
  scene.add(light);

  var material = new THREE.MeshBasicMaterial({
      transparent: true,
      side: THREE.DoubleSide,
      fog: false,
      color: 0xFF0000,
      opacity: 1.0
  });

  var cubeGeometry = new THREE.PlaneGeometry(100, 300, 1, 1);
  var cubeMesh = new THREE.Mesh(cubeGeometry, material);
  scene.add(cubeMesh);


  var material = new THREE.MeshBasicMaterial({
      transparent: true,
      side: THREE.DoubleSide,
      fog: false,
      color: 0x00FF00,
      opacity: 0.3
  });

  var cubeGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
  var cubeMesh = new THREE.Mesh(cubeGeometry, material);
  cubeMesh.position.set(0, 100, 40);
  scene.add(cubeMesh);

  var controls = new THREE.TrackballControls(camera, renderer.domElement);
  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 3.0;
  controls.panSpeed = 3.0;
  controls.noZoom = false;
  controls.noPan = false;
  controls.noRotate = false;
  controls.staticMoving = false;
  controls.dynamicDampingFactor = 0.3;
  controls.keys = [65, 83, 68]; // [rotateKey, zoomKey, panKey]

  function render() {
      controls.update();

      camera.lookAt(scene.position);
      renderer.render(scene, camera);
      requestAnimationFrame(render);
  }
  render();

Answer 1

这种情况很容易被just removing the transparent: true from the red material 解决（不应该是透明的）。

透明度多个平面

1 个答案: