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 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 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>
The thing is that you draw only one time on your scene. You 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.