0

2 つの平面が、透明度が有効になっている状態で、ある程度の距離を置いて互いの上に積み重ねられています。最上部のプレーンの透明度が期待どおりに動作していません。マウス (トラックボール) を動かしているときに、上部のプレーンを通して最下部のプレーンが見えないことがあります。

ここで問題を確認してください:サンプルコード

コード：

  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 に答える