Three.js透明模型纹理错误

西尔杰

我已经搜索了所有互联网,并尝试了很多方法,但没有结果。如何删除纹理透明度错误?查看图片

树模型纹理错误

因此,在3dsmax模型上看起来不错。我已经使用python脚本从.obj转换为.js格式,以便.png文件透明(.obj不透明)。

如何解决我的问题?谢谢

var loader = new THREE.JSONLoader();
loader.load('tree_model.js', function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    object.traverse( function ( child ) {
            if ( child.material instanceof THREE.MeshPhongMaterial ) {

                // this code is unattainable, but anyway without if (..) it does not work

                child.material.alphaTest = 0.5;
                child.material.depthWrite = false;
                child.material.depthTest = false;
                child.material.side = THREE.BackSide;
                child.material.transparent = true;
            }
        });
        scene.add(object);
    });
});

和渲染器:

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, premultipliedAlpha: true });
福克·蒂尔

您必须设置alphaTest材料。另外设置叶子和分支,以THREE.DoubleSide确保从另一侧查看时它们不会消失。

您发布的代码包含各种错误,因此请将其替换为:

var loader = new THREE.JSONLoader();
loader.load('model/Elka.js', function(geometry, materials) {

    for( var i = 0; i < materials.length; i ++ ) {
        var material = materials[ i ];
        material.alphaTest = 0.5;
        material.side = THREE.DoubleSide;
        // not-so-good practice
        if ( material.name === "NorwaySpruceBark" ) {
            material.transparent = false;
        }
    }

    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    scene.add(object);
});

要进一步减少透明度伪像,请将主干设置为不透明。您的模型应包含正确的材质设置,因此这是一种不良做法。

编辑:设置alphapremultipliedAlpharenderer对于此问题不是必需的。

结果:

透明树

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Three.js透明度模型纹理错误

来自分类Dev

three.js透明纹理和着色器材质

来自分类Dev

three.js-具有透明纹理的相交平面

来自分类Dev

three.js-使用纹理图像遮罩透明度

来自分类Dev

透明纹理在three.js中相互干扰

来自分类Dev

Three.js重叠透明PNG纹理有黑色背景

来自分类Dev

THREE.js导入的模型不应用面部纹理

来自分类Dev

Three.js更改网格纹理会更改整个模型

来自分类Dev

WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理

来自分类Dev

WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理

来自分类Dev

Three.js-更新纹理

来自分类Dev

THREE.js透明平面切割相邻对象的纹理

来自分类Dev

Three.js一些对象无法通过透明的点云材质纹理看到

来自分类Dev

Three.js-depthWrite与depthTest在3个点上获得透明的画布纹理贴图

来自分类Dev

Three.js,自定义着色器,填充png纹理并设置透明度?

来自分类Dev

如何在THREE.js中为具有图像纹理的对象制作透明孔?

来自分类Dev

具有半透明纹理的 THREE.js renderTarget 似乎与黑色背景混合

来自分类常见问题

透明背景与three.js

来自分类Dev

如何从Blender导入模型和关联的纹理到three.js中?

来自分类Dev

如何使用Three.js将多个纹理/材质加载到模型中?

来自分类Dev

A-Frame / THREE.js, 无纹理简化 gltf[glb] 模型

来自分类Dev

three.js:BufferGeometry和纹理

来自分类Dev

Three.js使用framebuffer作为纹理

来自分类Dev

使用Three.js进行纹理喷涂

来自分类Dev

用户在three.js中上传纹理

来自分类Dev

three.js从cubecamera创建纹理

来自分类Dev

在THREE.js中纹理球体

来自分类Dev

THREE.js-无法在本地加载纹理

来自分类Dev

如何水平翻转Three.js纹理

Related 相关文章

热门标签

归档