Three.js - AxisHelper withTextGeometry和旋转问题上的标签
Three.js - AxisHelper withTextGeometry和旋转问题上的标签
提问于 2016-05-05 09:43:41
我有一个带有球体的主场景和另一个子窗口(在右下角)，在那里我已经绘制了主场景的(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”标签像轴一样旋转，但自身(局部)方向作为旋转θ角的函数应用，因此在相机旋转期间标签始终保持在用户面前？
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 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上找到代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37040959
复制相关文章
相似问题
腾讯云开发者
