0

两个平面相互堆叠,它们之间有一定距离,都启用了透明度。顶部平原的透明度表现不如预期。移动鼠标(轨迹球)时,有时通过上平面看不到最低平面。

请在此处查看问题:示例代码

编码:

  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();
4

1 回答 1

0

这种情况很容易解决,只需transparent: true从红色材料(不应该是透明的)中移除 。

于 2013-07-22T14:23:34.373 回答