Ba JS Bản đồ Chất liệu gây WebGL Cảnh báo

Question

Tôi đang cố gắng để xác định một vật liệu để meshes tôi nạp từ OBJLoader thông qua chức năng wrapper sau:

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

Khi kết cấu đã được nạp và đó là thời gian để áp dụng các nguyên liệu vào lưới, tôi bắt đầu nhận được cảnh báo sau trên bảng điều khiển:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 

và bản thân lưới biến mất.

Tôi đang làm gì sai ở đây?

CẬP NHẬT

Như @WestLangley chỉ trên nhận xét: Không bao giờ cố gắng áp dụng kết cấu/vật liệu sau khi mọi thứ đã được trả lại. Tạo những tài liệu trước khi vẽ các đối tượng đến hiện trường và sau đó thay đổi chúng bằng cách sử:

obj.material.map = texture 

Answer 1

Với WebGLRenderer, bạn không thể chuyển đổi từ một loại vật liệu mà không có một kết cấu, đến một tài liệu với một kết cấu, sau khi lưới đã được trả lại một lần. Điều này là bởi vì, không có kết cấu ban đầu, hình học sẽ không có bộ đệm UV WebGL cần thiết.

Công việc xung quanh là bắt đầu bằng vật liệu có kết cấu màu trắng đơn giản.

UPDATE: Ngoài ra, bạn có thể bắt đầu với một loại vật liệu textureless, và sau đó thiết lập các cờ sau khi một kết cấu được thêm vào:

material.needsUpdate = true; 
geometry.buffersNeedUpdate = true; 
geometry.uvsNeedUpdate = true; 

three.js r.58

Answer 2

Tôi cũng đã nhận lỗi này trong khi tải một cảnh từ máy xay sinh tố. Đối với tôi vấn đề đã được cố định khi unwrapping của uv cho mỗi lưới tôi muốn có một kết cấu trên.