相关疑难解决方法(0)

THREE.js生成UV坐标

我正在使用THREE.js OBJ加载器将模型导入场景.

我知道我可以很好地导入几何体,因为当我为它指定一个MeshNormalMaterial时,它显示出很棒的效果.但是,如果我使用任何需要UV坐标的东西,它会给我错误:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 
Run Code Online (Sandbox Code Playgroud)

我知道这是因为加载的OBJ没有UV坐标,但我想知道是否有任何方法可以生成所需的纹理坐标.我试过了

material.needsUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.buffersNeedUpdate = true;
Run Code Online (Sandbox Code Playgroud)

......但无济于事.

有没有办法使用three.js自动生成UV纹理,还是我必须自己分配坐标?

javascript geometry texture-mapping uv-mapping three.js

30
推荐指数
4
解决办法
3万
查看次数

如何将纹理应用于Three.js中的自定义几何体

我成功地将纹理应用于立方体几何体:

var geometry = new THREE.CubeGeometry(10, 10, 10);
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, meshMaterial);
Run Code Online (Sandbox Code Playgroud)

有了这个我得到一个很好的纹理立方体像这样:

在此输入图像描述

现在我想将相同的纹理(512x512 jpg图像)应用到我从STL加载的自定义模型中,这就是我得到的(在这种情况下是金字塔):

在此输入图像描述

这是代码:

loader.load(jsonParam.url, function (geometry) {
            var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
            meshMaterial.side = THREE.DoubleSide;

            var mesh = new THREE.Mesh(geometry, meshMaterial);

            mesh.castShadow = false;
            mesh.receiveShadow = true;
            scene.add(mesh);
        });
Run Code Online (Sandbox Code Playgroud)

为什么没有应用纹理,我只得到纹理颜色的平均值?

texture-mapping three.js

5
推荐指数
1
解决办法
1万
查看次数