<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();
This Pen doesn't use any external CSS resources.