网格基本材料不渲染纹理的四角体
网格基本材料不渲染纹理的四角体
提问于 2013-10-09 16:45:52
我刚开始学习一些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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-09 18:52:33
至少，您需要在geometry.faceVertexUvs 0中指定UVs。但是首先，让它与THREE.PlaneGeometry一起工作。
如果要使用texture = new THREE.Texture()创建纹理，则需要设置texture.needsUpdate = true;，另一种方法是使用THREE.ImageUtils.LoadTexture();
three.js r.61
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19277954
复制相关文章
相似问题
腾讯云开发者
