Question

我用文本创建了一个shapegeometry。如何在移动相机时保持文本面向相机？

...

this.textGeometry = new THREE.ShapeGeometry(THREE.FontUtils.generateShapes(value, parameters));
this.textValue = new THREE.Mesh(this.textGeometry, new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide }));
this.textValue.matrixAutoUpdate = true;
this.add(this.textValue)

...

我认为我的问题是我修改了父四元数3D对象：

this.quaternion.setFromAxisAngle (axis, radians);

然后唯一的操作：

textValue.quaternion.copy (camera.quaternion);

还不够

考虑到四元数的状态，如何修复旋转？

Answer 1

如果您不关心调用基本updateMatrix函数，这可以是一个解决方案

yourShapeGeometry.prototype.updateMatrix = function(){
 // THREE.Object3D.prototype.updateMatrix.call(this);
 fixOrientation(this.textValue); 
}

function fixOrientation(mesh){
  mesh.setRotationFromQuaternion(camera.quaternion);
  mesh.updateMatrix();
}

或者只需编辑文本网格的updateMatrix，如

textMesh.updateMatrixWorld = updateSpriteWorld;
function updateSpriteWorld(){

        if ( this.matrixWorldNeedsUpdate === true || force === true ) {

                this.setRotationFromQuaternion(camera.quaternion);
                this.updateMatrix();
                this.matrixWorld.copy( this.matrix );
                this.matrixWorldNeedsUpdate = false;

                force = true;
        }

        // update children

        for ( var i = 0, l = this.children.length; i < l; i ++ ) {

            this.children[ i ].updateSpriteWorld( force );

        }
}

Answer 2

我认为这应该可以解决问题：

this.textValue.lookAt( camera.position );

Three.js使用THREE.ShapeGeometry创建的文本面向相机

2 个答案: