Aktualisierung DecalGeometry Vertices, UVs,

Question

Ich spiele gerade mit ThreeJS decals. Ich konnte einen schönen Fleck auf meine Kugel legen.

Hier ist der Code, mit dem ich den Aufkleber auf meiner Kugel "anlege". (Ich habe einige benutzerdefinierten Klassen, aber keine Sorge darüber.

// Create sphere 
var mainMesh = new THREE.Mesh(
    new THREE.SphereGeometry(7, 16, 16), 
    new THREE.MeshBasicMaterial({ color: 0x00a1fd }) 
); 

// Declare decal material 
var decalMaterial = new THREE.MeshPhongMaterial({ 
    color    : 0xff0000,  
    specular   : 0x444444, 
    map     : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-diffuse.png'), 
    normalMap   : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-normal.jpg'), 
    normalScale   : new THREE.Vector2(1, 1), 
    shininess   : 30, 
    transparent   : true, 
    depthTest   : true, 
    depthWrite   : false, 
    polygonOffset  : true, 
    polygonOffsetFactor : -4, 
    wireframe   : false 
}); 

// Create decal itself 
var decal = new THREE.Mesh(
    new THREE.DecalGeometry(
     mainMesh, 
     new THREE.Vector3(0, 2.5, 3), 
     new THREE.Vector3(0, 0, 0), 
     new THREE.Vector3(8, 8, 8), 
     new THREE.Vector3(1, 1, 1) 
    ), 
    decalMaterial.clone() 
); 

// Add mesh + decal + helpers 
scene.add(
    mainMesh, 
    new THREE.HemisphereLight(0xffffff, 0, 1), 
    decal, 
    new THREE.WireframeHelper(decal, 0xffff00) 
); 

decal.add(new THREE.BoxHelper(decal, 0xffff00)); 

Jetzt woud, Ich mag diesen Fleck auf meiner Sphäre bewegen und damit aktualisieren, um die Geometrie meines Abziehbild.

Leider wenn ich decal.geometry.computeDecal(), das Netz des Aufklebers rufe nicht aktualisiert. ich keine Lösung dazu finden.

function moveDecal() 
    { 
     decal.translateX(1); 
     decal.geometry.computeDecal(); 
    }; 

nach der DecalGeometry Klasse, die Funktion computeDecal bereits auf true gesetzt verschiedene Mitglieder erforderlich aktualisieren Eckpunkte, Spalte Oder, UVs, ....

this.computeDecal = function() { 
     // [...] 
     this.verticesNeedUpdate  = true; 
     this.elementsNeedUpdate  = true; 
     this.morphTargetsNeedUpdate = true; 
     this.uvsNeedUpdate   = true; 
     this.normalsNeedUpdate  = true; 
     this.colorsNeedUpdate  = true; 
    }; 

Vielen Dank für Ihre Hilfe! : D

PS: ThreeJS r80

Answer 1

Sie versuchen Eckpunkte Ihrer Geometrie zu aktualisieren.

Sie den Wert eines Scheitels componnent ändern können,

geometry.vertices[ 0 ].x += 1; 

aber Sie können nicht neue veritices

geometry.vertices.push(new THREE.Vector3(x, y, z)); // not allowed 

oder weisen Sie eine neue Vertex-Array hinzufügen

geometry.vertices = new_array; // not allowed 

nach Die Geometrie wurde mindestens einmal gerendert.

Similarry, für andere Attribute, wie UVs. Weitere Informationen finden Sie unter der folgenden Antwort: verticesNeedUpdate in Three.js.

three.js r.80