Firebase 更新three.js中球体的位置
我想使用Firebase数据库中的数据动态移动球体的位置。当我在Firebase中更改值时,新球体显示在新位置,但在旧位置有一个球体Firebase 更新three.js中球体的位置,firebase,three.js,Firebase,Three.js,我想使用Firebase数据库中的数据动态移动球体的位置。当我在Firebase中更改值时,新球体显示在新位置,但在旧位置有一个球体 function init() { //scene, renderer and camera } function animate() { renderer.render(scene, camera); controls.update(); requestAnimationFra
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);
}
您的
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);
}
感谢您的回复,但球体未显示,控制台显示THREE.Object3D.add:object不是THREE.Object3D的实例。请发布所有代码,包括场景,渲染器和相机请。我已经更新了问题,你能找出代码的错误吗?控制台错误应该来自GLTF加载程序。您看到房间模型了吗?是的,room.gltf可见,可以使用OrbitControl进行控制,但球体不可见