在 THREE.js 的 AxisHelper 中标记顶点答案

【问题标题】：Labelling the vertices in AxisHelper of THREE.js在 THREE.js 的 AxisHelper 中标记顶点
【发布时间】：2013-11-03 01:11:08
【问题描述】：

考虑下面的代码：

<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 中的轴助手（创建标签）

【问题讨论】：

到目前为止，您尝试了哪些步骤来实现目标？我刚刚看到你添加了AxisHelper。您是否尝试过TextGeometry，并将其放置在每行的末尾？也许将 TextGeomety.lookAt 设置为相机对象？

标签： javascript canvas three.js

【解决方案1】：

文字几何可以添加如下：

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 位置来添加其他标签。

【讨论】：

typeface-0.15.js必须放在threejs之前，helvetiker_regular.typeface.js必须放在后面。这是因为 threejs 为字体加载器打了补丁。 :-/
这是对我有用的添加文本的解决方案：stackoverflow.com/questions/35589984/textgeometry-in-three-js

【解决方案2】：

FWIW，three.js（和搅拌机，就此而言）似乎有一个模式，其中 x、y、z 轴分别是红色、绿色和蓝色（即 RGB），所以如果你可以匹配 RGB 和 XYZ，它可以帮助确定哪个轴是哪个。

【讨论】：