Did my camera position change in the last second?
Asking for help
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="OrbitControls.js"></script>
<body>
<div id="container">
</div>
<script type="text/javascript" src="update_on_camera_change.js"></script>
</body>
</html>
JavaScript
var container, stats;
var camera, controls, scene, renderer;
var cross;
class CustomDelay {
constructor() {
this.timer = null;
}
Timeout(fun = () => {}, ms) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
fun()
}, ms)
}
}
var state = JSON.parse('{ "bbox" : { "xmin":-180.0 , "ymin":-90.0, "xmax":180.0, "ymax":90.0 },' +
'"camera" : { "x" : 300 , "y" : 0 , "z" : 0, "dfc" : 300 },' +
'"orbit" : { "AzimuthAngle" : 0, "PolarAngle" : 0}}');
init();
function init() {
THREE.Cache.enabled = true;
// SCENE
scene = new THREE.Scene();
var axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
// CAMERA
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight);
camera.position.x = state['camera']['x'];
camera.position.y = state['camera']['y'];
camera.position.z = state['camera']['z'];
camera.near = 100;
camera.far = 10000;
camera.updateProjectionMatrix();
scene.add(camera);
// CONTROLS (Orbit)
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', render);
controls.update();
// LIGHTS
var ambientlight = new THREE.AmbientLight(0xffffff, 2);
scene.add(ambientlight);
flashlight = new THREE.SpotLight(0x0000ff, 1000, 500, 1, 1, 1);
camera.add(flashlight);
flashlight.position.set(100, 100, 100);
flashlight.target = camera;
var spotLightHelper = new THREE.SpotLightHelper(flashlight);
scene.add(spotLightHelper);
cube = cube();
scene.add(cube);
plane();
// RENDERER
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setClearColor(0xFFFFFF);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// WEBSITE
container = document.getElementById("container");
container.appendChild(renderer.domElement);
// WINDOW
window.addEventListener('resize', onWindowResize, false);
// TRIGGER UPDATE DGGS
/* const myDelay =...