<div class="info1">555</div>
body {
  margin: 0;
  background: #1c1d21;
}
canvas {
  width: 100%;
  height: 100%;
  margin-top: 2px;
  border: 1px solid #ccc;
}
.info1 {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 25px;
  border: 1px solid;
}

var camera, scene, renderer, mesh, mesh2, controls;
var state = 0
var logs = {
  x: 50, //47.84000000000003,
  y: 300,
  z: 0
};
var logs1 = {
  x: 0, //47.84000000000003,
  y: 0,
  z: 0
};
var logsArr = [];
logsArr.push(logs);
logsArr.push(logs1);
console.log(logsArr);

if (logs.x > logs1.x) {
  
  var logs = {
  x: 0, //47.84000000000003,
  y: 0,
  z: 0
  };
  
  console.log('logs is greater');
}

const x1 = [1, 500];
const y1 = [1, 500];
const z1 = [1, 300];

const r2 = [1, 50];

function convertRange(value, r1, r2) {
  return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
}

init();
animate();
function init() {
  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.set(0, -50, 50);
  camera.lookAt(0, 0, 0);
  scene = new THREE.Scene();

  var ambient = new THREE.AmbientLight(0x000000, 0.3);
  scene.add(ambient);
  var light = new THREE.PointLight(0xffffff, 0.6, 200);
  light.position.set(10, 10, 100);
  light.castShadow = true;
  scene.add(light);

  var geometryPlane = new THREE.PlaneGeometry(300, 300);
  var materialPlane = new THREE.MeshPhongMaterial({ color: 0xcccccc });
  var plane = new THREE.Mesh(geometryPlane, materialPlane);
  //plane.rotation.x = -Math.PI/2;
  plane.receiveShadow = true;
  scene.add(plane);

  var geometry = new THREE.BoxGeometry(5, 5, 5);
  var material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
  mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;

  mesh.position.x = convertRange(logsArr[0].x, x1, r2);
  console.log(convertRange(logsArr[0].x, x1, r2));
  // translateX(logsArr[0].x);
  mesh.position.y = convertRange(logsArr[0].y, y1, r2);
  console.log(convertRange(logsArr[0].y, y1, r2));
  mesh.position.z = convertRange(logsArr[0].z, z1, r2);
  console.log(convertRange(logsArr[0].z, z1, r2));

  scene.add(mesh);

  var geometry2 = new THREE.BoxGeometry(5, 5, 1);
  var material2 = new THREE.MeshPhongMaterial({ color: 0x0000ff });
  mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.castShadow = true;

  mesh2.position.x = convertRange(logsArr[1].x, x1, r2);
  console.log(convertRange(logsArr[1].x, x1, r2));
  mesh2.position.y = convertRange(logsArr[1].y, y1, r2);
  console.log(convertRange(logsArr[1].y, y1, r2));
  mesh2.position.x = z = convertRange(logsArr[1].z, z1, r2);
  console.log(convertRange(logsArr[1].z, z1, r2));

  scene.add(mesh2);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xffffff);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.gammaInput = true;
  renderer.gammaOutput = true;

  // controls = new THREE.OrbitControls( camera, renderer.domElement  );
  // controls.enableKeys = false;
  // controls.update();

  stats = new Stats();
  document.body.appendChild(stats.dom);
  document.body.appendChild(renderer.domElement);
  //////////////////////////////////////////////////////////
}

function moveX(speed) {
  if (mesh.position.x > mesh2.position.x) {
    mesh.position.x -= speed;
  }
}
function moveY(speed) {
  if (mesh.position.y > mesh2.position.y) {
    mesh.position.y -= speed;
  }
}

function animate() {
  requestAnimationFrame(animate);
  // if (
  //   mesh.position.x >= mesh2.position.x &&
  //   mesh.position.y > mesh2.position.y
  // ) {
  //   moveY(0.1);
  // }
  moveX(0.1);
  stats.update();
  renderer.render(scene, camera);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js
  2. https://threejs.org/examples/js/controls/OrbitControls.js
  3. https://threejs.org/examples/js/controls/FirstPersonControls.js
  4. https://threejs.org/examples/js/controls/PointerLockControls.js
  5. https://lcfc.ru/assets/three/THREEx.KeyboardState.js
  6. https://threejs.org/examples/js/libs/stats.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js