在three.js中更新球体的位置

Question

我想使用Firebase数据库中的数据来动态移动球体的位置。当我更改Firebase中的值时，新球体显示在新位置上，但在旧位置上有一个球体。

 function init() {
       //scene, renderer and camera 
    }


    function animate() {
        renderer.render(scene, camera);
        controls.update();
        requestAnimationFrame(animate);

    }

    function connectFirebase(){
        var firebaseConfig  = {
        //configured firebase

          };

          firebase.initializeApp(firebaseConfig);

          var database = firebase.database();
          var ref = database.ref("reference");
          ref.on('value', getPosition, errData);

    }

    function getPosition(data){
        //console.log(data.val());
        var pos = data.val();
        var keys = Object.keys(pos);
        sphere1(pos.x_pos, pos.y_pos, pos.z_pos);//x_pos,y_pos,z_pos are obtained from firebase
    }
    function errData(err){
        console.log(err);
    }  
       function sphere1(x,y,z){
        var geometry = new THREE.SphereGeometry( 15, 32, 32 );
        var material = new THREE.MeshBasicMaterial( {color: 0x000000} );
        var sphere = new THREE.Mesh( geometry, material );
        scene.add( sphere );
        sphere.position.set(x,y,z);
    }

如何在不显示初始位置球体的情况下将球体平移到新位置？

编辑代码：

    var scene, camera, renderer, light, hlight, directionalLight, controls;
    var x_coordinate,y_coordinate,z_coordinate;

    function init() {
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        scene = new THREE.Scene();
        scene.background = new THREE.Color('#333333');
        camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.x = 50;
        camera.position.y = 400;
        camera.position.z = 3000;
        camera.rotation.z = 45/180*Math.PI;
        camera.rotation.y = 30/180*Math.PI;
        camera.rotation.y = 30/180*Math.PI;
        hlight = new THREE.AmbientLight(0x404040, 100);
        scene.add(hlight);

        directionalLight = new THREE.DirectionalLight(0xffffff, 100);
        directionalLight.position.set(0, 1, 0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        light = new THREE.PointLight(0xeb4034, 100);
        light.position.set(0, 300, 500);
        scene.add(light);

        var loader = new THREE.GLTFLoader();
        loader.load('room.gltf', function (gltf) {
            var room = gltf.scene.children[0];
            room.scale.set(4, 4, 4);
            scene.add(gltf.scene);
            animate();
        });
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.update();

    }

    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectMatrix();
    });

    function animate() {
        renderer.render(scene, camera);
        controls.update();
        requestAnimationFrame(animate);

    }
    var sphere = function(){
        var geometry = new THREE.SphereGeometry( 15, 32, 32 );
        var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
        var mesh = new THREE.Mesh( geometry, material );
        return mesh;
    }
    scene.add(sphere);

    function connectFirebase(){
        var firebaseConfig  = {
          };
          firebase.initializeApp(firebaseConfig);

          // Get a reference to the database service
          var database = firebase.database();
          var ref = database.ref("reference");
          ref.on('value', getPosition, errData);

    }

    function getPosition(data){
        var pos = data.val();
        var keys = Object.keys(pos);
        updateSpherePosition(pos.x_pos, pos.y_pos, pos.z_pos);//x_pos,y_pos,z_pos are obtained from firebase
    }

    function errData(err){
        console.log(err);
    }


    function updateSpherePosition(x, y, z){
        sphere.position.set(x, y, z);
   }

Answer 1

您的sphere1函数将在每次调用时创建一个新网格。这通常不是你想要的。最好创建一次球体网格，将其添加到场景中，然后仅基于新数据更新位置。我还将material.color更改为红色，以防您的场景具有黑色背景颜色-然后您将看不到任何东西。

试试这个：

function init() {
    //scene, renderer and camera 
}


function animate() {
     renderer.render(scene, camera);
     controls.update();
     requestAnimationFrame(animate);

}

var sphere = function() {
    var geometry = new THREE.SphereGeometry( 15, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
    var mesh = new THREE.Mesh( geometry, material );
    return mesh;
}

scene.add( sphere );

function connectFirebase(){
     var firebaseConfig  = {
     //configured firebase

       };

       firebase.initializeApp(firebaseConfig);

       var database = firebase.database();
       var ref = database.ref("reference");
       ref.on('value', getPosition, errData);

}

function getPosition(data){
     //console.log(data.val());
     var pos = data.val();
     var keys = Object.keys(pos);
     updateSpherePosition(pos.x_pos, pos.y_pos, pos.z_pos);//x_pos,y_pos,z_pos are obtained from firebase
}

function errData(err){
     console.log(err);
}

function updateSpherePosition(x, y, z){
     sphere.position.set(x, y, z);
}