Question

我正在使用Autodesk的ForgeViewer加载IFC文件和自定义THREE.js网格，这与完成here

类似

我遇到的问题是切割平面（see e.g. here）不会影响自定义网格，只会影响Forge模型。有什么方法可以使切平面也可以在自定义网格上工作？

如果我没记错的话，r71版本中尚未引入THREE.js的设置clippingPlanes的方式（哪个Forge的自定义实现基于此），但是也许有一种特定的Forge方式可以做到这一点工作吗？

Answer 1

是的，Forge Viewer使用其自己的基于着色器的剪辑。有关更多详细信息，请参见我的其他answer（尤其是此gist）。

Answer 2

扩展Petr的答案，下面是支持带纹理的网格的切平面所必需的代码：

const imgTexture = THREE_FORGE.ImageUtils.loadTexture(textureUrl);

const vertexShader = `
  #if NUM_CUTPLANES > 0
      varying vec3 vWorldPosition;
  #endif
  varying vec2 vUv;
  void main() {
      #if NUM_CUTPLANES > 0
          vec4 _worldPosition = modelMatrix * vec4( position, 1.0 );
          vWorldPosition = _worldPosition.xyz;
      #endif
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
  }
`;

const fragmentShader = `
  #include<cutplanes>
  #if NUM_CUTPLANES > 0
      varying highp vec3 vWorldPosition;
  #endif
  uniform sampler2D texture;
  varying vec2 vUv;
  void main() {
      #if NUM_CUTPLANES > 0
          checkCutPlanes(vWorldPosition);
      #endif
      gl_FragColor = texture2D(texture, vUv);
  }
`;

const material = new THREE_FORGE.ShaderMaterial({
    uniforms: {
        cutplanes: {type: 'v4v', value: []},
        hatchParams: {type: 'v2', value: new THREE_FORGE.Vector2(1.0, 10.0)},
        hatchTintColor: {type: 'c', value: new THREE_FORGE.Color(0xFFFFFF)},
        hatchTintIntensity: {type: 'f', value: 1.0},
        texture: {type: 't', value: imgTexture},
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
});

const mesh = new THREE.Mesh(geometry, material);

使切割平面与ForgeViewer中的自定义网格一起使用

2 个答案: