<span></span>
var intersection = false;

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

var geometry = new THREE.SphereBufferGeometry( 15, 10, 10 );
var material = new THREE.MeshPhongMaterial( {color: 0xff00ff, side: THREE.DoubleSide, flatShading: true, wireframe: true } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );


var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.enablePan = false;

function onPointerDown( event ) {	
  if(intersection) controls.enableRotate = true;
  else controls.enableRotate = false;
}

var render = function () {
  requestAnimationFrame( render );   
  renderer.render( scene, camera );
}

function onPointerMove() {
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );
	// calculate objects intersecting the picking ray 
	intersection = raycaster.intersectObjects( scene.children ).length >= 1 ? true : false;   
  document.querySelector("span").innerText = "Intersection: " + intersection;
	
}

window.addEventListener('pointermove', onPointerMove, false);
window.addEventListener( 'pointerdown', onPointerDown, false );

render();

  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/three@0.137.1/build/three.min.js
  2. https://cdn.jsdelivr.net/npm/three@0.137.1/examples/js/controls/OrbitControls.js