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>