Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Three.js Object3d儿童注视摄影机位置_Three.js - Fatal编程技术网

Three.js Object3d儿童注视摄影机位置

Three.js Object3d儿童注视摄影机位置,three.js,Three.js,我正在努力使用Object3D,其中子网格应该查看摄影机位置。 如果相机离得“远”,它可以正常工作,但如果相机向对象移动,则无法正常工作 然后,如果摄影机位置靠近对象位置,则第二个添加的平面将旋转,直到摄影机看到平面的边缘 我知道为什么这种行为只出现在第二个添加的平面上,并且相机靠近物体的位置 这是我到目前为止的资料。 创建对象: var obj = new THREE.Object3D(); obj.position.set( x, y, z ); var Uniforms = { t

我正在努力使用Object3D,其中子网格应该查看摄影机位置。
如果相机离得“远”,它可以正常工作,但如果相机向对象移动,则无法正常工作

然后,如果摄影机位置靠近对象位置,则第二个添加的平面将旋转,直到摄影机看到平面的边缘

我知道为什么这种行为只出现在第二个添加的平面上,并且相机靠近物体的位置

这是我到目前为止的资料。
创建对象:

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;
}
我可以在
obj.update(pos)
中调用
this.lookAt(pos)
来旋转整个对象,但是其他网格不应该以这种方式旋转,所以很遗憾,这是没有选择的

以及两个平面的简单顶点着色器:

varying vec2 vUv;
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  vUv = uv;
}
然后我调用animationloop:

$.each(scene.children, function(i, obj){
    if( obj.update !== undefined ) {
        shaderTiming = (time - startTime )/ 1000;
        obj.update( camera.getWorldPosition() );
    }   
});
编辑:我刚刚注意到,如果对象的位置不是
(0,0,0)
,就会发生这种行为。如果是这样的话,它在任何摄像机位置都能正常工作。
此外,一个简单的距离计算,即对象到摄影机的距离,也无法正常工作

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));
感谢您的提示。

Object3D.lookAt()
不支持具有旋转和/或平移父对象的对象


three.js r.85

如果
.lookAt()
通常不支持已翻译的父级,为什么第一个添加的平面的行为与它应该的一样?但是很高兴知道,谢谢!你的问题太复杂了,我无法理解。@WestLangley“lookAt()不支持具有旋转和/或平移父对象的对象。”“什么时候可以解决这个问题?”?有没有计划把它修好?