我有一个带有球体的主场景和另一个子窗口(在右下角),在那里我已经绘制了主场景的(x,y,z)轴。
在这个子窗口中,我想在每个轴上绘制标签"X“、"Y”和"Z“(更精确地说,位于每个AxisHelper的末端)。我知道如何使用TextGeometry,但问题是我无法让这些标签旋转,以使它们始终显示在用户面前。
你可以在下面的链接中看到这个问题:标签"X“相对于轴是固定的,并且与摄像头一起旋转,所以它并不总是面对用户。
从这两个链接link1和link2中,我尝试添加(在我的示例中,我尝试仅使用"X“标签):
function addLabelAxes() {
// Axes label
var loader = new THREE.FontLoader();
loader.load( 'js/helvetiker_regular.typeface.js', function ( font ) {
var textGeo1 = new THREE.TextGeometry( 'X', {
font: font,
size: 5,
height: 0.1,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelEnabled: true,
} );
var color = new THREE.Color();
color.setRGB(255, 255, 255);
textMaterial = new THREE.MeshBasicMaterial({ color: color });
var meshText1 = new THREE.Mesh(textGeo1, textMaterial);
// Position of axes extremities
var positionEndAxes = axes2.geometry.attributes.position;
var label1X = positionEndAxes.getX(0);
meshText1.position.x = label1X + axisLength;
meshText1.position.y = 0;
meshText1.position.z = 0;
// Rotation of "X" label
//meshText1.rotation = zoomCamera.rotation;
meshText1.lookAt(zoomCamera.position);
// Add meshText to zoomScene
zoomScene.add(meshText1);
});
}
zoomCamera
表示一个PerspectiveCamera
,它是子窗口的摄像头(即zoomScene
);我通过执行以下操作将TextGeometry添加到zoomScene
:
zoomScene.add(meshText1);
有人能看到我的代码出了什么问题吗?我想知道我是否可以让"X“标签旋转本身,即"X”标签像轴一样旋转,但自身(局部)方向作为旋转θ角的函数应用,因此在相机旋转期间标签始终保持在用户面前?
谢谢你的帮助。
发布于 2016-10-23 09:58:14
您可能正在寻找THREE.SPRITE
。来自the docs
精灵精灵(
Object3D -> sprite ):精灵是3d场景中始终面向摄影机的平面。
下面是一个如何使用它的简单示例:
var map = new THREE.TextureLoader().load( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );
这是一个类似场景的working example (3个不同位置的缩放精灵)。你可以在github上找到代码。
https://stackoverflow.com/questions/37040959
复制相似问题