Tengo un código mysql que actualiza los valores en vivo desde un archivo .php y tengo un visor de modelo three.js que quiero poder rotar en vivo según la entrada de sql actualizada. El siguiente código lo muestra en la etiqueta camera.position.set Mi página muestra los números actualizados cada segundo, pero también necesito que el modelo se actualice. Probé varios tipos de animate(), settimeout, etc. pero realmente no sé cuál es la mejor manera de hacerlo.
Aquí está mi código three.js existente. Tenga en cuenta que el resultado FUNCIONA, simplemente no se actualiza a menos que actualice la página.
<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>La cosa es que dibujas solo una vez en tu escena. Simplemente debe llamar a un método que haga algo como esto:
function animate() { requestAnimationFrame( animate ); /* update your information*/ render() }Si desea obtener más información, puede encontrarla allí con un buen ejemplo sobre la animación y cómo funciona: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
Además, no debe renderizar dentro de su método init().