ThreeJs DREI.Mesh.position Problem

Ich bin Total neu three.js und versucht einfach den Griff zu bekommen, die three.js Bibliotheken.
Ich habe eine Kugel-rendering auf dem Bildschirm, aber ich kann nicht sagen, was es ist .position member verweist, nicht angezeigt werden Bildschirm Koordinaten.
Es ist x0 Punkt scheint zu sein, etwa auf halbem Weg über den Bildschirm (was ich verarbeiten kann und verstehen)
aber es ist y0 ist etwa 1/3 von der Unterseite des Bildschirms, und wenn ich mich bewege ihn sagen 300 es sich nicht bewegt und 300 Pixel.

Ich bin kinda outta meine Tiefe und nur hacken, jemand Beispiel-code, um zu versuchen und get a grip, aber das ist bluffen mir. Ich habe versucht, auf der Suche über 3js-API aber nicht finden alle Antworten.

Ich poste den relevanten code im Falle somethings falsch.

    <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

InformationsquelleAutor Julz | 2012-04-05