logo标签列表

在THREE.js的AxisHelper中给顶点打标签

javascriptcanvasthree.js
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中的轴助手（创建标签）。
到目前为止，你尝试了哪些步骤来实现你的目标？我只看到你添加了 AxisHelper。你尝试过使用 TextGeometry 并将其定位在每条线的末端吗？也许将 TextGeomety.lookAt 设置为相机对象会有帮助？ - Darryl_Lehmann
2个回答
11

不知道你是否注意到，在three.js（以及blender）中存在一种模式，即x、y和z轴分别为红、绿和蓝色（即RGB），因此如果你能将RGB与XYZ相匹配，就可以帮助确定哪个轴是哪个。

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

在使用Three.js的TextGeometry之前，您需要包含helvetiker_regular.typeface.js字体文件，因为Three.js需要它来加载THREE.TextGeometry。您可以通过创建网格对象克隆或创建新的文本几何体并根据坐标轴帮助器的vertices[3]和vertices[5]更改xyz位置来添加其他标签。
在引入threejs之前必须先引入typeface-0.15.js，在引入后必须再引入helvetiker_regular.typeface.js。这是因为threejs对字体加载器进行了猴子补丁。 :-/ - Peter Ehrlich
这是我用于添加文本的解决方案：https://dev59.com/DJTfa4cB1Zd3GeqPQGZl - Russell Strauss
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接