在 THREE.js 的 AxisHelper 中标记顶点 [英] Labelling the vertices in AxisHelper of THREE.js
问题描述
考虑下面的代码:
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"> </script>
<script>
var scene=new THREE.Scene();
var axis;
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 10000);
camera.position.z = 3;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(document.body.clientWidth,document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
var cube = new THREE.Mesh( new THREE.CubeGeometry(50,50,50),new THREE.MeshBasicMaterial({color: 0x000000}));
scene.add( cube );
function animate(t) {
camera.position.x = Math.sin(t/1000)*300;
camera.position.y = 150;
camera.position.z = Math.cos(t/1000)*300;
camera.lookAt(scene.position);
renderer.render(scene, camera);
renderer.shadowMapEnabled = true;
window.requestAnimationFrame(animate, renderer.domElement);// auto called - many advantages
};
animate(new Date().getTime());
axis = new THREE.AxisHelper(75);
scene.add(axis);
</script>
</body>
</html>
以上代码在立方体中创建了 x,y,z 轴.
请帮我标记轴.
带标签的文本必须随轴旋转.
我需要一个示例代码来自定义 THREE.js 中的轴助手(创建标签)
The above code creates x,y,z axis in the cube.
Kindly help me to label the axis.
The Labelled text must rotate along with the axis.
I need a sample code to customize the axis helper(to create labels) in THREE.js
推荐答案
文本几何可以添加如下:
Text geometry can be added as below:
var textGeo = new THREE.TextGeometry('Y', {
size: 5,
height: 2,
curveSegments: 6,
font: "helvetiker",
style: "normal"
});
var color = new THREE.Color();
color.setRGB(255, 250, 250);
var textMaterial = new THREE.MeshBasicMaterial({ color: color });
var text = new THREE.Mesh(textGeo , textMaterial);
text.position.x = axis.geometry.vertices[1].x;
text.position.y = axis.geometry.vertices[1].y;
text.position.z = axis.geometry.vertices[1].z;
text.rotation = camera.rotation;
scene.add(text);
在使用TextGeometry 之前，您需要包含helvetiker_regular.typeface.js 字体文件作为三，js 需要它来加载THREE.TextGeometry.您可以通过创建网格对象的克隆或创建新的文本几何图形并根据轴助手的顶点 [3] 和顶点 [5] 更改 xyz 位置来添加其他标签.
You need to include helvetiker_regular.typeface.js font file before using TextGeometry as Three,js needs it for loading THREE.TextGeometry. You can add other labels just either by creating clones of mesh object or creating new text geometries and changing the xyz position as per vertices[3] and vertices[5] of axis helper.
这篇关于在 THREE.js 的 AxisHelper 中标记顶点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
