Question

我刚开始学习一些Three.js。我有一个基本的webgl示例工作。但是现在我想在THREE.js框架中得到一个类似的例子，我在纹理方面遇到了麻烦。

使用createjs预加载器加载纹理。

我尝试将htmlImageElement附加到文档以检查它是否在创建材质之前已加载。这看起来很好。所以我认为我的问题是在纹理完成加载之前创建材质。一直是其他人的问题。

此外，我已经测试了我之前的webgl示例中的纹理，这会引发相同的错误，所以我认为使用的图像无效。

下面示例中的四边形将呈现为蓝色正方形，但是当我将纹理添加到材质时，会抛出错误。 GL_INVALID_OPERATION：glDrawElements：尝试访问属性1中的范围顶点。

我对Three.js的经验很少，所以我认为问题在于如何创建材质，场景或几何体。虽然我真的没有想法了。

我正在使用TypeScript。

private createPaper(): THREE.Mesh {
        var paperGeo = new THREE.Geometry();
        paperGeo.vertices.push(new THREE.Vector3(1, 1, 0));
        paperGeo.vertices.push(new THREE.Vector3(3, 1, 0));
        paperGeo.vertices.push(new THREE.Vector3(3, 3, 0));
        paperGeo.vertices.push(new THREE.Vector3(1, 3, 0));

        paperGeo.faces.push(new THREE.Face3(0,1,2));
        paperGeo.faces.push(new THREE.Face3(2,3,0));

        var img: HTMLImageElement = m.getAsset("paper0");

        this.paperTex = new THREE.Texture(img, THREE.UVMapping,THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
            THREE.LinearFilter, THREE.LinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, 0);

        var paperMaterial = new THREE.MeshBasicMaterial({
            map:this.paperTex, color: 0x0000dd, side: THREE.DoubleSide
        });

        var paper = new THREE.Mesh(paperGeo, paperMaterial);


        return paper;
    }

Answer 1

至少需要在geometry.faceVertexUvs [0]中指定UV。但首先，让它与THREE.PlaneGeometry一起使用。

如果您使用texture = new THREE.Texture()创建纹理，则需要设置texture.needsUpdate = true;替代方法是使用THREE.ImageUtils.LoadTexture();

three.js r.61

网格基本材质不渲染纹理四边形

1 个答案: