Threejs中的剪切或擦除区域答案

【问题标题】：Clipping or Erasing area in threejsThreejs中的剪切或擦除区域
【发布时间】：2015-09-29 06:03:49
【问题描述】：

首先我解释上面的图片。图像标有 1、2 和 3。

1 - 这是矩形。

2 - 这是矩形。

3 - 这是圆形（使用destination-in 全局复合操作绘制）。

每个形状都使用 HTML5 画布绘制。

现在我想使用threejs 和WebGLRenderer 进行相同的绘制。那么可以画画吗？如果是那怎么办？

第三种形状可以是任何形状（例如圆形、矩形、多边形）。

有什么建议吗？

【问题讨论】：

标签： three.js

【解决方案1】：

我们可以通过设置 blending 属性来擦除threejs中的一个区域。在 threejs 中提供了不同类型的混合属性。例如 THREE.SubtractiveBlending 用于减去面积。

详情-

   1) http://threejs.org/docs/#Reference/Constants/Materials  
   2) http://threejs.org/examples/#webgl_materials_blending  
   3) http://threejs.org/examples/#webgl_materials_blending_custom

【讨论】：

【解决方案2】：

使用 WebGLRenderer 进行绘制，基本上是通过以下方式更改画布：

renderer = new THREE.WebGLRenderer();

请注意 WebGLRenderer 中不存在的 Canvas 方法。

如果您显示为代码的一部分，最好提供更高的精度。但是有什么，只要在这里评论！

【讨论】：

是否可以在三个 js 中从场景中擦除或剪切任何类型的形状（像发布的图像一样擦除或剪切）？