Three.js Object3d Kind lookAt Kameraposition

Question

Ich kämpfe mit einem Object3D, welches Kind Meshes sollte auf die Kameraposition schauen.
Es funktioniert gut, wenn die Kamera "weit" entfernt ist, aber nicht, wenn sich die Kamera auf das Objekt zu bewegt.

Wenn sich die Kameraposition in der Nähe der Objektposition befindet, dreht sich die zweite hinzugefügte Ebene, bis die Kamera auf den Rand des Plans schaut.

Und ich habe Ahnung, warum dieses Verhalten nur auf der zweiten Ebene und nur hinzugefügt wird, wenn die Kamera in der Nähe der Objektposition ist.

Hier ist was ich bisher habe.
Erstellen Sie das Objekt:

var obj = new THREE.Object3D(); 
obj.position.set(x, y, z); 
var Uniforms = { 
    texturePrimary:  { type: "t", value: Texture }, 
    textureColorGraph: { type: "t", value: ColorGraph }, 
    time:    { type: "f", value: 0 }, 
    color: { type: "f", value: 0 } 
}; 

obj.Uniforms = Uniforms; 
obj.add(makeplane1(3.2, Uniforms)); 
obj.add(makeplane2(25, Uniforms)); 

obj.update = function(pos){ 
    this.Uniforms.time.value = shaderTiming; 
    $.each(this.children, function(i,mesh){ 
     if(mesh.name === "plane1" || mesh.name === "plane2"){ 
      var vec = mesh.parent.worldToLocal(pos); 
      mesh.lookAt(vec); 
     } 
    }); 
}; 

function makePlane1(radius, uniforms){ 
    var Geo = new THREE.PlaneGeometry(radius, radius); 
    var Material = new THREE.ShaderMaterial(
     { 
     uniforms:  uniforms, 
     vertexShader: shaders[1].vertex, 
     fragmentShader: shaders[1].fragment, 
     blending: THREE.AdditiveBlending, 
     transparent: true 
     }; 

var plane = new THREE.Mesh(Geo, Material); 
plane.name = "plane1"; 
return plane; 
); 

function makePlane2(radius, uniforms){ 
    var Geo = new THREE.PlaneGeometry(radius, radius); 
    var Material = new THREE.ShaderMaterial(
     { 
     uniforms:  uniforms, 
     vertexShader: shaders[2].vertex, 
     fragmentShader: shaders[2].fragment, 
     blending: THREE.AdditiveBlending, 
     transparent: true 
     }; 
); 

var plane = new THREE.Mesh(Geo, Material); 
plane.name = "plane2"; 
return plane; 
} 

ich this.lookAt(pos) in obj.update(pos) nennen könnte das ganze Objekt, aber auch andere Maschen drehen sollten zu drehen, nicht auf diese Weise, so dass leider keine Option ist.

Und ein einfacher Vertex-Shader für beiden Ebene:

varying vec2 vUv; 
void main() { 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
    vUv = uv; 
} 

und ich rufe dann im animationloop:

$.each(scene.children, function(i, obj){ 
    if(obj.update !== undefined) { 
     shaderTiming = (time - startTime)/ 1000; 
     obj.update(camera.getWorldPosition()); 
    } 
}); 

EDIT: Ich habe gerade bemerkt, dass dieses Verhalten nur auftreten, wenn die Position des Objekts nicht (0,0,0) ist. Wenn ja, funktioniert es genau so, wie es bei jeder Kameraposition sein sollte.
Auch eine einfache Distanzberechnung, Objekt zur Kamera, funktioniert nicht richtig.

vec1 = this.position; 
vec2 = camera.position; 
var dist = Math.sqrt(Math.pow(vec1.x - vec2.x, 2) + Math.pow(vec1.y - vec2.y, 2) + Math.pow(vec1.z - vec2.z, 2)); 

Danke für Hinweise.

Answer 1

Object3D.lookAt() unterstützt keine Objekte mit gedrehten und/oder übersetzten Eltern.

three.js r.85