CODEWITHSUNDEEP
three.js
李晓东
李晓东

Reputation: 83

Move an object along with an ellipse path

I have a question about why my gltf object still cannot moving along the ellipse path that I've created? It keep moving out of the ellipse path even though I put the gltf object within the ellipse (ellipse.add(gltf.scene)). is there any problem about my code?.... how can I move the gltf object along the ellipse path...?

I cant upload the gltf file to this website so the gltf model will not show in this case...

<!DOCTYPE html>
 <html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style>
        body{
            margin: 0;
            overflow: hidden;
        }

        canvas{
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>

    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>

    <script>
        var width = window.innerWidth;
        var height = window.innerHeight;
        var arrayEll = [];
        var arrayPla = [];

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(25, width / height, 1, 20000);
        camera.position.set(0, 50, 120);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio);
        var ambientLight = new THREE.AmbientLight( 0xffffff );
        scene.add( ambientLight );  
        var controls = new THREE.OrbitControls(camera);

        document.body.appendChild(renderer.domElement);
        THREE.EllipseCurve.prototype.realPoint = function ( t ) {
            var radians = 2 * Math.PI * t;
            return new THREE.Vector3( this.xRadius * Math.cos( radians ), 0, this.yRadius * Math.sin( radians ) );
        };


        pluorbit = new THREE.EllipseCurve(0, 0, 50, 38, 0, Math.PI * 2, false, 0);
        var points = pluorbit.getPoints(50);
        var geometry = new THREE.BufferGeometry().setFromPoints(points);
        var material = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 0.3});
        var ellipse = new THREE.Line(geometry, material);
        ellipse.rotation.x -= 190.1;
        ellipse.rotation.y += 0.15;
        scene.add(ellipse);
        arrayEll.push(ellipse);


        var loader = new THREE.GLTFLoader();

        var pluto;
        var plut = 0;

        loader.load( 'object.gltf', function ( gltf ) {
        pluto = gltf.scene;         
        gltf.scene.scale.set( 0.002, 0.002, 0.002 ); 
        var pt = pluorbit.realPoint(plut);
        gltf.scene.position.set(pt.x,pt.y,pt.z);
        scene.add( gltf.scene);
        arrayPla.push(pluto);
        });


        function animation(){
            requestAnimationFrame(animation);
            renderer.render(scene, camera);
            movingPlanet();
        }
        var mov = 0;

        function movingPlanet(){
            if(pluto != undefined){
                plut += 0.00014;
                var ps = pluorbit.realPoint(plut);
                mov += 0.0055;
                pluto.position.set(ps.x, (ps.y + mov) - 9, ps.z);
                if(pluto.position.x <= -49){
                    mov = -mov;
                }
            }
        }

        animation();

    </script>

</body>

</html>

Upvotes: 1

Views: 1107

Answers (1)

evgeni fotia
evgeni fotia

Reputation: 4810

update movingPlanet and make sure that you are doing ellipse.add( gltf.scene);

I set plut += 0.00000; for better demonstration 

function movingPlanet(){
            if(pluto != undefined){
                plut += 0.00000;
                var ps = pluorbit.realPoint(plut);
                mov += 0.0055;
                pluto.position.set(50 * Math.cos(mov), 38 * Math.sin(mov), ps.z);

            }
        }

Upvotes: 1

Related Questions