Question

我对three.js完全陌生，只是试图抓住three.js库。我有一个球体渲染到屏幕，但我不知道它是什么.position成员正在引用，它似乎不是屏幕坐标。它的x0点似乎是屏幕的一半左右（我可以处理和理解）但它的y0大约是屏幕底部的1/3，如果我移动它说300它不会移动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

不使用像素表示坐标。它们是更通用的“单位”类型。我想你想更多地了解一下WebGL（和3D基础知识），以便更好地理解和使用Three.js。

使用该透视相机，您可以使用以下方法使球体居中：

createScene(0, 0, 0, 0);

您还需要更改y轴增量的符号（方向）。 sphere.position.y += .1;必须为sphere.position.y -= .1;且...-= 1;必须为...+= 1;

ThreeJs THREE.Mesh.position问题

1 个答案: