<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.setScalar(50);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, canvas);

var cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var boxMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });

var geometry1 = new THREE.CylinderBufferGeometry(5, 5, 20, 32);
var cylinder = new THREE.Mesh(geometry1, cylinderMaterial);
cylinder.position.x = -20;
scene.add(cylinder);

var geometry2 = new THREE.SphereBufferGeometry(7, 32, 32);
var sphere = new THREE.Mesh(geometry2, sphereMaterial);
scene.add(sphere);

var geometry3 = new THREE.BoxBufferGeometry(10, 10, 10);
var cube = new THREE.Mesh(geometry3, boxMaterial);
cube.position.x = 20;
scene.add(cube);

var selected = cylinder;

var guiControls = new function() {
  this.color = cylinderMaterial.color.getStyle();
};

var gui = new dat.GUI();
gui
  .addColor(guiControls, "color")
  .listen()
  .onChange(function(e) {
    selected.material.color.setStyle(e);
  });

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var objects = [cylinder, sphere, cube];
var intersects = [];

renderer.domElement.addEventListener("click", onClick);

function onClick(event) {
  mouse.x = event.clientX / window.innerWidth * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObjects(objects);
  if (intersects.length > 0) {
    selected = intersects[0].object;
    guiControls.color = selected.material.color.getStyle();
  }
}

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js