Three.js - Need to update camera position live based on updated sql code

120

Question: Three.js - Need to update camera position live based on updated sql code

I have a mysql code that updates values live from a .php file and I have a three.js model viewer that I want to be able to rotate live based on the updated sql input. The code below shows it in the camera.position.set tag My javascript error page does show the numbers updated every second, but I need the model to update as well. I've tried various types of animate(), settimeout, etc. but don't really know the best way to do this.

Here's my existing three.js code. Note, the result WORKS, it just doesn't javascript error update unless I refresh the page.

        <script>             if ( ! Detector.webgl ) Detector.addGetWebGLMessage();              var camera, scene, renderer;              init();              function init() {                  scene = new THREE.Scene();                 scene.add( new THREE.AmbientLight( 0x999999 ) );                  var pointLight = new THREE.PointLight( 0xffffff, 0.6 );                 pointLight.position.set(80, 80, 90);                 scene.add( pointLight );                  camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );                  // Z is up for objects intended to be 3D printed.                  camera.up.set( 0, 0, 1 );                 camera.position.set( <?php echo $xaxis; ?>, <?php echo $yaxis; ?>, <?php echo $zaxis; ?> );                  //camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );                  scene.add( camera );                  renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setClearColor( 0x333333 );                 renderer.setPixelRatio( window.devicePixelRatio );                 renderer.setSize( window.innerWidth, window.innerHeight );                 document.body.appendChild( renderer.domElement );                  var loader = new THREE.ThreeMFLoader();                 loader.load( './models/3mf/cube_gears.3mf', function ( object ) {                      scene.add( object );                     render();                  } );                  var controls = new THREE.OrbitControls( camera, renderer.domElement );                 controls.addEventListener( 'change', render );                 controls.target.set( 80, 65, 35 );                 controls.update();                  window.addEventListener( 'resize', onWindowResize, false );              }              function onWindowResize() {                  camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                  renderer.setSize( window.innerWidth, window.innerHeight );                  render();              }              function render() {                  renderer.render( scene, camera );              } </script> 

Total Answers: 1

14

Answers 1: of Three.js - Need to update camera position live based on updated sql code

The thing is that you draw only one time on your scene. You javascript error should just call a method that does something like this :

function animate() {   requestAnimationFrame( animate );    /* update your information*/    render() } 

If you want more information you can find it there with a good exemple on the animation and how it works : https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

Moreover you should not render inside your init() method.