Update position of sphere in three.js - firebase

Question

I want to move the position of a sphere dynamically using data from Firebase Database. When I change value in Firebase new sphere is displayed on new position but there is a sphere in old position.
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);
}
How do I translate the sphere to new position without displaying a sphere in the initial position?
Edited Code :
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

Your sphere1 function is creating a new mesh on every call. That's typically not what you want. Better create the sphere mesh once, add it to the scene and then only update the position based on the new data. I also changed the material.color to red, in case your scene has a black background color - then you wouldn't see anything.
Try this:
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);
}