javascript - 如何在 three.js/WebGL 中更改 STL 对象的不透明度？

Question

我正在为一个我想从事的项目自学 WebGL，但我对 Three.js 的所有漂亮特性都很陌生。

我有一个 STL 对象，我正在使用 STL 加载程序将其导入 3-D 查看器。现在，我希望能够更改该对象的不透明度，并且可能删除该对象的某些特征以查看 STL 图像的内部。如何改变对象的不透明度，也许创建一个按钮来改变不透明度。我该怎么做？

另外，如果可能的话（因为加载的模型由几个部分组成）删除某些结构？也许侧面有一个工具栏，上面写着第 1 部分、第 2 部分、第 3 部分，对于每个部分，您只看到那个部分。

非常感谢！！:D

score 1 · Accepted Answer

在您的代码中，您必须使用 STLLoader 加载 STL 文件。而且由于 STL 文件没有材料，您将添加一个材料定义，如下所示：

var material = new THREE.MeshPhongMaterial ({ color: 0xFF0000 });
var mesh = new THREE.Mesh (object, material);

其中 object 是从 addEventListener 函数中的 event.target 分配的，因为这是加载 STL 文件的方式。您可以将材料定义更改为：

var material = new THREE.MeshPhongMaterial ({ color: 0xFF0000, opacity: 0.5, transparent: true });
var mesh = new THREE.Mesh (object, material);

得到红色透明材料。您不必使用 Phong，也可以使用 LambertMaterial。

1 回答 1