Question

请考虑以下代码：

<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轴请帮我标记轴。
标签文本必须与轴一起旋转我需要一个示例代码来自定义THERE.js

中的轴辅助器（以创建标签）

Answer 1

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

Answer 2

文字几何图形可以添加如下：

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);

在使用helvetiker_regular.typeface.js作为Three之前，您需要包含TextGeometry字体文件，js需要它来加载THREE.TextGeometry。您可以通过创建网格对象克隆或创建新文本几何以及根据轴帮助器的顶点[3]和顶点[5]更改xyz位置来添加其他标签。

标记THREE.js的AxisHelper中的顶点

2 个答案: