三种 JS Map Material 导致 WebGL 警告 [英] Three JS Map Material causes WebGL Warning
问题描述
我正在尝试为我通过以下包装函数从 OBJLoader 加载的网格定义材质:
I'm trying to define a material to meshes I loaded in from OBJLoader through the following wrapper function:
function applyTexture(src){
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
texture.image = event.content;
texture.needsUpdate = true;
// find the meshes from the loaded OBJ and apply the texture to it.
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
if(child.name.indexOf("Lens") < 0){
child.dynamic = true;
child.material = new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading, map : texture } );
// also tried:
//child.material = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0x000000, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, map : texture} );
// and:
//child.material = new THREE.MeshBasicMaterial({map : texture});
child.material.map = texture; // won't throw the WebGL Warning, but won't show the texture either;
} else {
// works just fine.
child.material = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0x000011, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, opacity: 0.6, transparent: true } );
}
}
});
});
loader.load( src );
}
当纹理加载完毕并且是时候将材质应用到网格时,我开始在控制台上收到以下警告:
When the texture has loaded and it's time to apply the material to the mesh, I start getting the following warning on the console:
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
网格本身消失了.
我在这里做错了什么?
正如@WestLangley 在评论中指出的那样:永远不要在渲染事物后尝试应用纹理/材料.在将对象渲染到场景之前创建材质,然后使用以下方法更改它们:
As @WestLangley pointed on the comments: Never try to apply texture/materials after things have been rendered. Create the materials before rendering the object to the scene and then change them using:
obj.material.map = texture
推荐答案
使用 WebGLRenderer
,你不能从没有纹理的材质切换到有纹理的材质,在网格有被渲染一次.这是因为,如果没有初始纹理,几何体将没有必要的内置 WebGL UV 缓冲区.
With WebGLRenderer
, you can't switch from a material without a texture, to a material with a texture, after the mesh has been rendered once. This is because, without an initial texture, the geometry will not have the necessary baked-in WebGL UV buffers.
解决方法是从具有简单白色纹理的材料开始.
A work-around is to begin with a material having a simple white texture.
更新:或者,您可以从无纹理材质开始,然后在添加纹理时设置以下标志:
UPDATE: Alternatively, you can begin with a textureless material, and then set the following flags when a texture is added:
material.needsUpdate = true;
geometry.buffersNeedUpdate = true;
geometry.uvsNeedUpdate = true;
three.js r.58
three.js r.58
这篇关于三种 JS Map Material 导致 WebGL 警告的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!