Threejs，在几何形状

使用ShaderMaterial假一孔在three.js所的53推出我可以假与使用着色器材料的另一几何形状的几何形状的孔与Threejs，在几何形状

vertex:void main() { 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
}

和

fragment:void main() { 
    gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0); //alpha is zero 
}

我可以窥视'洞'并看到背后的物体。从版本54开始，我只看到内部物体变白，我不能再窥视。我怎样才能让它再次工作？

我的完整样本：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>three.js webgl - geometry - cube</title> 
    <meta charset="utf-8"> 
    <style> 
     body { 
      margin: 0px; 
      background-color: #DDFFDD; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <script src="../build/old/three_53.js"></script> 
    <script src="../build/old/controls/TrackballControls_53.js"></script> 

    <script> 

     var camera, scene, renderer, controls, pointLight; 

     init(); 
     animate(); 

     function init() { 

      renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); 
      //renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      renderer.sortObjects = false; 
      document.body.appendChild(renderer.domElement); 

      camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.z = 400; 


      controls = new THREE.TrackballControls(camera); 
      controls.rotateSpeed = 1.0; 
      controls.zoomSpeed = 1.2; 
      controls.panSpeed = 0.8; 
      controls.noZoom = false; 
      controls.noPan = false; 
      controls.staticMoving = true; 
      controls.dynamicDampingFactor = 0.3; 

      scene = new THREE.Scene(); 

      scene.add(new THREE.AmbientLight(0x505050)); 

      pointLight = new THREE.PointLight(0xFFFFFF, 0.9); 
      scene.add(pointLight); 


      var mainGroup = new THREE.Object3D(); 

      var geometry = new THREE.CubeGeometry(100, 100, 10); 
      var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: 0xaaaaaa })); 
      //mesh.renderOrder = 2; 

      var geometry2 = new THREE.CubeGeometry(50, 50, 11); 

      var material2 = new THREE.ShaderMaterial({vertexShader:'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}', fragmentShader:'void main() { gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0);}'}); 

      var innerGroup = new THREE.Object3D(); 
      var mesh2 = new THREE.Mesh(geometry2, material2); 
      //mesh2.renderOrder = 1; 
      mainGroup.add(mesh); 

      innerGroup.add(mesh2); 
      mainGroup.add(innerGroup); 
      // 

      var geometry3 = new THREE.SphereGeometry(50); 
      var mesh3 = new THREE.Mesh(geometry3, new THREE.MeshLambertMaterial({ color: 0x00ff00 })); 
      mesh3.position.z = -200; 
      //mesh2.renderOrder = 3; 
      mainGroup.add(mesh3); 

      scene.add(mainGroup); 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

      controls.update(); 
      pointLight.position.set(camera.position.x, camera.position.y, camera.position.z); 

      renderer.render(scene, camera); 

     } 

    </script> 

</body>

它只适用，如果“孔对象”与着色材料为一组。

来源

2015-08-21 Fuxer

请参阅[本相关解答]（http://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion/28869802#28869802）。 – WestLangley

如果这个工作在它仅仅是意外。但是你可以在71，得到这个工作，如果你使用renderOrder：

holeObj.renderOrder = 1; 
bgObj.renderOrder = 2;

现在，如果holeObj是在bgObj前面那么在正常情况下，您将通过bgObj看到。这是因为在绘制透明像素时，holeObj仍会写入Z缓冲区。 bgObj将从该位置被遮蔽。但是，如果没有对分类进行仔细的管理，这只能用于特定的视图方向。

来源

2015-08-21 06:41:22 bjorke

renderOrder不起作用，我想通了，直到第53版才起作用，因为54有些不同，我在我的问题中附加了我的示例 – Fuxer

Threejs，在几何形状

回答

相关问题