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

Question

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

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

此外，如果可能(因为加载的模型由几个部分组成)删除某些结构？也许旁边有一个工具栏，上面写着第 1 部分、第 2 部分、第 3 部分，对于每个部分，您只会看到该部分。

非常感谢!! :D

Answer 1

在您的代码中，您一定已经使用 STLLoader 加载了 STL 文件。由于 STL 文件没有 Material ，您可以像这样添加 Material 定义:

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

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

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

得到红色透明 Material 。你不必使用 Phong，你也可以使用 LambertMaterial。