将 Alpha 通道分配给 OBJ/MTL 模型网格答案

【问题标题】：Assigning Alpha channels to OBJ/MTL model meshes将 Alpha 通道分配给 OBJ/MTL 模型网格
【发布时间】：2023-03-12 20:26:02
【问题描述】：

我在 three.js 中加载了一个模型，它有一些网格，其中纹理有一个 Alpha 通道。但是，没有将 alpha 应用于网格的这些部分。

这一切都在 Three.js R67 中

这是我的渲染设置。

renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});

这是模型加载代码。

loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;
            child.castShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );

我在想也许我需要遍历模型并手动分配 alpha？但这听起来很费力！想象一下，如果我有带有多个透明胶片的高多边形模型？我将如何推断网格上需要透明的网格的位置？但我什至不确定这种思路是否正确。

【问题讨论】：

那些有透明纹理的材质你设置material.transparent = true了吗？
我什至不知道如何在循环中这样做。你有一个例子可以指点我吗？现在是控制台记录材料，并会尝试将它们分开......
作为 hack，尝试编辑 .mtl 文件并将所需材料设置为 d = 0.9999。

标签： three.js

【解决方案1】：

我想我修好了。虽然我不知道解决方案是 100%。也许我的做法是错误的。

我知道头发必须在加载的网格中的某个位置，并且必须以某种方式输入。当我记录它时，我发现它，网格被命名为

名称：“head_group_151”

我认为如果头发被应用，它可能需要是一个带有 MeshPhongMaterial 的网格。因此，在我遍历模型的过程中，我将透明度应用于所有具有该材料的部分。这修复了模型的显示。但我认为它不会 100% 有效。

无论如何，这是现在更新的代码。

var loader = new THREE.OBJMTLLoader();
loader.load( 'chris/Chris_RE6.obj', 'chris/Chris_RE6.mtl', function ( object ) {
    mesh = object;
    mesh.traverse( function ( child ) {

           if ( child.material instanceof THREE.MeshPhongMaterial ) {

            child.material.transparent = true;

        }

        if ( child instanceof THREE.Mesh ) {

            child.castShadow = true;
            child.receiveShadow = true;

        }

    } );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );

    animate(new Date().getTime());


    var myElement = document.querySelector(".loading");
    myElement.style.display = "none";

} );

【讨论】：