ThreeJs THREE.Mesh.position Ausgabe

Question

Ich bin total neu zu three.js und versuche nur, die three.js Bibliotheken in den Griff zu bekommen. Ich habe eine Kugel Rendering auf dem Bildschirm, aber ich kann nicht sagen, was es ist. Position Mitglied referenziert, es scheint nicht Bildschirmkoordinaten zu sein. Es ist x0 Punkt scheint etwa auf halbem Weg über den Bildschirm zu sein (was ich handhaben und verstehen kann) aber es ist y0 ist etwa 1/3 von der Unterseite des Bildschirms und wenn ich es bewegen sage 300 es bewegt sich nicht um 300 Pixel .

Ich bin irgendwie aus meiner Tiefe raus und hack nur weg an jemandes Beispiel-Code, um zu versuchen, einen Griff zu bekommen, aber das blufft mich. Ich habe versucht, über 3js API zu suchen, aber keine Antworten zu finden.

Ich poste den relevanten Code für den Fall, dass etwas falsch drin ist.

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

Vielen Dank im Voraus

Answer 1

Koordinaten werden mit Pixeln nicht ausgedrückt. Sie sind eine generische Art von "Einheiten". Ich denke, Sie möchten etwas mehr über WebGL (und 3D-Grundlagen) lesen, um Three.js besser zu verstehen und zu verwenden.

Mit Hilfe dieser Perspektive Kamera können Sie die Kugel Zentrum mit:

createScene(0, 0, 0, 0); 

Sie müssen auch das Vorzeichen (Richtung) der y-Achse-Schritte. sphere.position.y += .1; muss sphere.position.y -= .1; sein und ...-= 1; muss sein