Question

您好我已经创建了x和y坐标。如何标记坐标轴，就像我显示下面的图像。当我们使用three.js中的animate调整坐标线的大小时，如何移动标签但是当我调整坐标线时，我无法移动标签

下面是我的预期图像和我使用的代码

             1
              -
              -
              -
              -
   x ---------------------------- y
              -
              -
              -
              -
             2

码

<style type="text/css">
  body {
    /* Set the background color of the HTML page to black */
    background-color: #000000;
    /* Hide oversized content. This prevents the scroll bars. */
    overflow: hidden;
  }
</style>
<!-- Include Three.js libraries -->
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/Detector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<!-- This is the DIV element which will contain the WebGL canvas. To be identifiable later on, 
          the id 'WebGLCanvas' is applied to it. -->

<div id="overlaytext1" style="position:relative; top: 290px; left: 1030px;color:white;">a</div>
<div id="overlaytext2" style="position:relative; top: 800px; left: 1030px;color:white;">b</div>


<div id="WebGLCanvas">

  <!-- This JavaScript block encloses the Three.js commands -->
  <script>
    var scene;
    var camera;
    var renderer;
    initializeScene();
    renderScene();
    animate();


    function initializeScene() {
      scene = new THREE.Scene();

      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);


      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
      camera.position.set(0, 0, 100);
      camera.lookAt(new THREE.Vector3(0, 0, 0));

      var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
      });

      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(0, -20, 0));
      geometry.vertices.push(new THREE.Vector3(0, 30, 0));

      var line = new THREE.Line(geometry, material);



      var geometry2 = new THREE.Geometry();
      geometry2.vertices.push(new THREE.Vector3(-10, 0, 0));
      geometry2.vertices.push(new THREE.Vector3(10, 0, 0));

      var geometry3 = new THREE.Geometry();
      geometry3.vertices.push(new THREE.Vector3(-10, 0, 0));
      geometry3.vertices.push(new THREE.Vector3(0, 200, 0));



      var line1 = new THREE.Line(geometry, material);
      var line2 = new THREE.Line(geometry2, material);
      var line3 = new THREE.Line(geometry3, material);


      scene.add(line1);
      scene.add(line2);
      /*scene.add(line3); */

      controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function renderScene() {
      renderer.render(scene, camera);
    }

    function animate() {

      // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
      requestAnimationFrame(animate);

      // Render the scene.
      renderer.render(scene, camera);
      controls.update();

    }
  </script>
</div>

如何将坐标标记为x和y根据坐标大小移动

0 个答案: