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、x、y、z 軸がそれぞれ赤、緑、青 (つまり、RGB) である three.js (およびブレンダー) にはパターンがあるようです。したがって、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);

Three,js の読み込みに必要なため、helvetiker_regular.typeface.js使用する前にフォント ファイルをインクルードする必要があります。メッシュ オブジェクトのクローンを作成するか、新しいテキスト ジオメトリを作成し、軸ヘルパーの vertices[3] および vertices[5] に従って xyz 位置を変更するだけで、他のラベルを追加できます。TextGeometryTHREE.TextGeometry

于 2013-10-25T07:42:06.450 に答える