Three.js围绕物体移动位置旋转

时间:2014-11-26 22:18:29

标签: javascript rotation three.js

我试图得到一个物体,我已经制作了一个叫做地球的球体,围绕另一个叫做太阳的物体旋转。 我让地球随着空间的移动而旋转,但是我无法绕着太阳移动球体。 我不知道该做什么我试过看世界空间但是我的程序似乎崩溃了,我试着查看父示例here但是所有这一切似乎都是将它旋转到一个没有运动的轴上的地球在太阳周围(例如它的绳索停留在(50,0,0)并在现场旋转)。 这是我到目前为止: (我删除了父方法)

function WebGLStart()
        {
            var canvas = document.getElementById('ctx');

            var RENDER_DIST = 1000,
                FOV = 75;
            var WIDTH = 600,
                HEIGHT= 500;
            var onRenderFcts= [];
            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, 0.1, RENDER_DIST);
            camera.position.z = 100;
            scene.add(camera);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(WIDTH,HEIGHT);
            renderer.setViewport(10, 10, 600, 500);
            canvas.appendChild(renderer.domElement);

            var sphere;
            var earth;
            init();

            function init() 
            {

                var geometry   = new THREE.SphereGeometry(10.0, 32, 32);
                var texture = THREE.ImageUtils.loadTexture('Textures/sun.jpg')
                var material = new THREE.MeshBasicMaterial( {color: 0xf0f0f0, map: texture} );
                sphere = new THREE.Mesh(geometry, material);
                sphere.position.set(0,0,0);
                scene.add(sphere);

                var geometry   = new THREE.SphereGeometry(10.0, 32, 32);
                var texture = THREE.ImageUtils.loadTexture('Textures/earth.jpg');
                var material = new THREE.MeshBasicMaterial( {map: texture} );
                earth = new THREE.Mesh(geometry, material);
                earth.position.set(50, 0.0, 0.0); 
                scene.add(earth);
            }
            onRenderFcts.push(function(){
                renderer.render( scene, camera );       
            })

            var lastTimeMsec= null;
            requestAnimationFrame(function animate(nowMsec)
            {
                requestAnimationFrame( animate );
                lastTimeMsec    = lastTimeMsec || nowMsec-1000/60;
                var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec);
                lastTimeMsec    = nowMsec;

                onRenderFcts.forEach(function(onRenderFct){
                    onRenderFct(deltaMsec/1000, nowMsec/1000);
                })
            })
        }

非常感谢任何帮助!

0 个答案:

没有答案