ThreeJs THREE.Mesh.position issue

Question

私は全く新しいthree.jsであり、three.jsライブラリの把握を試みています。 球体レンダリングをスクリーンに表示していますが、ポジションメンバーが参照しているものがわからない、スクリーン座標ではないようです。 x0ポイントは画面（画面上では半分程度）（これは扱うことができます） y0は画面の一番上から1/3です。移動すれば300ピクセル移動しません。

私は自分の奥行きからちょっと離れていて、グリップを試してみるために誰かのサンプルコードをハックしているだけですが、これは私を壊しています。私は3jsのAPIを見てみましたが、何の答えも見つけられませんでした。

私はそこに何か間違っている場合に関連するコードを掲示します。予め

<script src="js/Three.js"></script> 
    <script src="js/Stats.js"></script> 
    <script src="js/mDetector.js"></script> 
    <script src="moddShape.js"></script> 
    <script language="javascript" type="text/javascript"></script> 
    <script> 
     var SCREEN_WIDTH = window.innerWidth; 
     var SCREEN_HEIGHT = window.innerHeight; 
     var container,stats; 
     var camera, scene; 
     var canvasRenderer, webglRenderer; 
     var mesh, zmesh, geometry, pointLight, pmesh, sphere, sphereMaterial; 
     var mouseX = 0, mouseY = 0; 
     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 
     var render_canvas = 1; 
     var render_gl = 1; 
     var has_gl = 0; 
     var targetX = 0, targetY = 0; 
     var CameraZPos = 240; 

     document.addEventListener('mousemove', onDocumentMouseMove, false); 
     document.addEventListener('mousedown', handleMouseEvent, false); 

     init(); 
     animate(); 

     function init() 
     { 
      container = document.createElement('div'); 
      document.body.appendChild(container); 
      camera = new THREE.PerspectiveCamera(90, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 100000); 
      camera.position.z = CameraZPos; 
      scene = new THREE.Scene(); 
      // RENDERER 
      webglRenderer = new THREE.WebGLRenderer 
      (
       { 
        antialias: true 
       } 
      ); 
       webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
       webglRenderer.domElement.style.position = 'relative'; 
       container.appendChild(webglRenderer.domElement); 
       has_gl = 1; 

      // STATS - FPS 
      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.top = '0px'; 
      stats.domElement.style.left = '0px'; 
      stats.domElement.style.zIndex = 0; 
      container.appendChild(stats.domElement); 

      { 
       createScene(0, 100, 5, 0) 
      }; 

      // LIGHT 
      var pointLight = new THREE.PointLight(0xFFFFFF); 
      // set its position 
      pointLight.position.x = 10; 
      pointLight.position.y = 50; 
      pointLight.position.z = 130; 
      // add to the scene 
      scene.add(pointLight); 
     } 

     function createScene(x, y, z, b) 
     { 
      // create the sphere's material 
      sphereMaterial = new THREE.MeshLambertMaterial(
      { 
       // red. 
       color: 0xCC0000 
      }); 
      // set up the sphere vars 
      var radius = 50, segments = 16, rings = 16; 
      // create a new mesh with sphere geometry - 
      sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), sphereMaterial); 
      sphere.position.set(x, y, z); 
      sphere.scale.set(1, 1, 1); 
      sphere.overdraw = true; 
      // add the sphere to the scene 
      scene.add(sphere); 
     } 

     function onDocumentMouseMove(event) 
     { 
      mouseX = (event.clientX - windowHalfX); 
      mouseY = (event.clientY - windowHalfY); 
     } 

     function animate() 
     { 
      requestAnimationFrame(animate); 
      render(); 
      stats.update();//Update FPS 
     } 

     function handleMouseEvent(mouseEvent) 
     { 
      targetX = mouseX; 
      targetY = mouseY; 
      //Text field printouts 
      //Positions relevent to 0 0 midscreen 
      document.myform.XY_Coords.value = "X Pos " + targetX + "\n" + "Y Pos " + targetY; 
      //Positions relevent to 0 0 top left 
      document.myform.XY_Coords.value += "\n\nX Pos 2 " + mouseEvent.clientX + "\n" + "Y Pos 2 " + mouseEvent.clientY; 

     } 

     function render() 
     { 
      if (sphere.position.x < targetX) 
      { 
       sphere.position.x += .1; 
      } 
      if (sphere.position.y < targetY) 
      { 
       sphere.position.y += .1; 
      } 
      if (sphere.position.x > targetX) 
      { 
       sphere.position.x -= .1; 
      } 
      if (sphere.position.y > targetY) 
      { 
       sphere.position.y -= .1; 
      }    
      camera.lookAt(scene.position); 
      document.myform.shipCoords.value = "ShipX " + sphere.position.x + "\nShipY " + sphere.position.y + "\nShipZ " + sphere.position.z; 
      if (render_gl && has_gl) webglRenderer.render(scene, camera); 
     } 
    </script> 

おかげ

Answer 1

座標は、画素を用いて表現されていません。彼らはより一般的なタイプの「ユニット」です。 Three.jsをよりよく理解して使用するために、WebGL（と3Dの基礎）についてもう少し詳しくお知りになりたいと思います。

あなたが使用して球をセンタリングすることができ、その透視カメラを使用して：あなたは、あなたのy軸の単位の符号（方向）を変更する必要が

createScene(0, 0, 0, 0); 

。 sphere.position.y += .1;はsphere.position.y -= .1;で、...-= 1;は...+= 1;