0

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

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

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

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

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

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

我正在使用打字稿。

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;
    }
4

1 回答 1

0

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

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

三.js r.61

于 2013-10-09T18:52:33.160 回答