Question

我有一个问题，为什么我的gltf对象仍然不能沿着我创建的椭圆路径移动？即使我将gltf对象放在椭圆内（ellipse.add（gltf.scene）），它仍会移出椭圆路径。我的代码有什么问题吗？....如何沿着椭圆路径移动gltf对象？？

我无法将gltf文件上传到此网站，因此在这种情况下gltf模型将不会显示...

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

Answer 1

更新movingPlanet并确保您正在做ellipse.add( gltf.scene);

我设置了plut += 0.00000;以便进行更好的演示

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

            }
        }

沿椭圆路径移动对象

1 个答案: