4

考虑下面的代码： 

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

4

2 回答 2

11

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

于 2014-01-08T08:15:15.663 回答
4

文本几何可以添加如下：

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在使用之前包含字体文件TextGeometry作为三，js需要它来加载THREE.TextGeometry。您可以通过创建网格对象的克隆或创建新的文本几何图形并根据轴助手的顶点 [3] 和顶点 [5] 更改 xyz 位置来添加其他标签。

于 2013-10-25T07:42:06.450 回答