I'm attempting to align this._mesh.skeleton.bones[ 5 ] (located at the bend in the green object extending from the hand) with the yellow helper line.
_FindBubble() {
const handPosition2world = new THREE.Vector3();
this._anchor['LeftHandIndex1'].getWorldPosition(handPosition2world);
const dir = handPosition2world;
// yellow helper 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);
}
By replacing
this._mesh.skeleton.bones[ 5 ].quaternion.slerp(dirToBubbleObj.quaternion, 1).set(dirToBubbleObj.quaternion) in the photo code snippet, none of the green tube from the hand after bone 5 is rendered.
https://i.sstatic.net/tt6bn.png
Modifying _Updatedateanimation as shown below has produced a noticeable change, albeit I am uncertain why there is a difference. I expected it to function similarly to the previous code but seems more concise.
https://i.sstatic.net/uj6Kp.png https://i.sstatic.net/d6wSH.png https://i.sstatic.net/NMXFp.png