body {
  margin: 0;
  padding: 0;
}
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.122/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.122/examples/jsm/controls/OrbitControls.js";

var camera, controls, scene, renderer, spots, tween;
var objects = [];

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.01,
    100000
  );
  camera.position.z = 10;
  camera.position.y = 5;

  scene = new THREE.Scene();

  buildScene();

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.5;
  controls.addEventListener('end', () => {
    updateCameraOrbit();
  });
  updateCameraOrbit();

  renderer.domElement.addEventListener("click", onclick, true);
}

function onclick(event) {
  var selectedObject;
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(spots, true);
  if (intersects.length > 0) {
    selectedObject = intersects[0];

    var newPos = selectedObject.object.position.clone();
    newPos.y = camera.position.y;
    tween = new TWEEN.Tween(camera.position).to(
      {
        x: newPos.x,
        y: newPos.y,
        z: newPos.z
      },
      2000
    );

    tween.easing(TWEEN.Easing.Quadratic.Out);
    tween.start();
    tween.onUpdate(function () {
      updateCameraOrbit();
    }.bind(this));
    tween.onComplete(function () {
      updateCameraOrbit();
    }.bind(this));
  }
}

function updateCameraOrbit() {
  // Update OrbitControls target to a point just in front of the camera

  var forward = new THREE.Vector3();
  camera.getWorldDirection(forward);

  controls.target.copy(camera.position).add(forward);
};



function animate() {
  TWEEN.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update();
}

function buildScene() {
  var planeGeometry = new THREE.PlaneGeometry(100, 100, 50, 50);
  var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true
  });
  var plane = new THREE.Mesh(planeGeometry, material);
  plane.rotateX(-Math.PI / 2);
  scene.add(plane);

  var cubes = [];
  var mat, geo;
  for (var i = 0; i < 30; i++) {
    geo = new THREE.BoxGeometry(
      Math.random() * 4,
      Math.random() * 16,
      Math.random() * 4
    );
    mat = new THREE.MeshBasicMaterial({ wireframe: false });
    switch (i % 3) {
      case 0:
        mat.color = new THREE.Color(0xff0000);
        break;
      case 1:
        mat.color = new THREE.Color(0xffff00);
        break;
      case 2:
        mat.color = new THREE.Color(0x0000ff);
        break;
    }
    const cube = new THREE.Mesh(geo, mat);
    cubes.push(cube);
  }
  cubes.forEach((c) => {
    c.position.x = Math.random() * 100 - 50;
    c.position.z = Math.random() * 100 - 50;
    c.geometry.computeBoundingBox();
    c.position.y =
      (c.geometry.boundingBox.max.y - c.geometry.boundingBox.min.y) / 2;
    scene.add(c);
  });

  spots = [];
  for (var i = 0; i < 30; i++) {
    geo = new THREE.BoxGeometry(4, 0.4, 4);
    mat = new THREE.MeshBasicMaterial({ wireframe: false });

    mat.color = new THREE.Color(0xffffff);

    var spot = new THREE.Mesh(geo, mat);
    spots.push(spot);
  }
  spots.forEach((c) => {
    c.position.x = Math.random() * 100 - 50;
    c.position.z = Math.random() * 100 - 50;
    c.geometry.computeBoundingBox();
    c.position.y = 0.2;
    scene.add(c);
  });
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.js