在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轴。
请帮我标记轴。
标记的文本必须与轴一起旋转。
我需要一个示例代码来自定义轴帮助（创建标签）。 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);
U在使用文本几何之前需要包含helvetiker_regular.typeface.js字体文件加载文本geomtery。
可以通过创建网格物体的克隆或创建新的文本几何形状，并根据轴辅助程序的顶点[3]和顶点[5]更改xyz位置来添加其他标签。
U need to include helvetiker_regular.typeface.js font file before using text Geometry as Three,js needs it for loading text geomtery. u 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屋！
