threeJS .lookAt 看错了方向，继承了旋转

Question

我只是想让this._mesh.skeleton.bones[ 5 ]（位置：手上绿色物体的弯曲处）指向与辅助黄线相同的方向

    _FindBubble() {
        const handPosition2world = new THREE.Vector3();
        this._anchor['LeftHandIndex1'].getWorldPosition(handPosition2world);
        const dir = handPosition2world;

// helper yellow line
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const points = [];
points.push( new THREE.Vector3( handPosition2world.x, handPosition2world.y, handPosition2world.z ) );
points.push( new THREE.Vector3( this._bubble._components.BubbleModelController.averageOfVertices.x, this._bubble._components.BubbleModelController.averageOfVertices.y, this._bubble._components.BubbleModelController.averageOfVertices.z ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line( geometry, material );
this._scene.add( line );

        dir.sub(this._bubble._components.BubbleModelController.averageOfVertices);
        dir.normalize();
        return dir.negate();
    }


    _Updateanimation(timeInSeconds) {
        const dirToBubble = this._FindBubble();
        var dirToBubbleObj = new THREE.Object3D();
        dirToBubbleObj.lookAt(dirToBubble);

        this._mesh.skeleton.bones[ 5 ].quaternion.set(dirToBubbleObj.quaternion);
    }

照片用 this._mesh.skeleton.bones[ 5 ].quaternion.slerp(dirToBubbleObj.quaternion, 1) 代替设置，.set(dirToBubbleObj.quaternion) 不渲染骨骼 5 后手上的任何绿管

将 _Updatedateanimation 更改为

  _Updateanimation(timeInSeconds) {
        const dirToBubble = this._FindBubble();
        this._mesh.skeleton.bones[ 5 ].lookAt(dirToBubble);
  }

给了我这个，感觉像是进步，我不知道为什么它不同我想我会像上面的代码一样做，但它只是写得更干净

Answer 1

在下面的代码中添加一个最小长度的骨骼来代替手和管子之间的 0 并使 1 -> 0 这样一开始就没有时髦的弯曲，我会在稍后进行更新到它，但下面给出了我想要的效果

  _Updateanimation(timeInSeconds) {
    this._mesh.skeleton.bones[ 0 ].lookAt(this._bubble._components.BubbleModelController.averageOfVertices);
    this._mesh.skeleton.bones[ 1 ].rotation.x = Math.PI/2;
  }

threeJS .lookAt 看错了方向，继承了旋转

threeJS .lookAt looking the wrong way, inherited rotations

javascript

three.js