PhotoSpheres

by amitlzkpa

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.110/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.110/examples/js/controls/OrbitControls.js"></script>


<div id="threeScene">
</div>

CSS

#threeScene {
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

let container, renderer, scene, camera, controls;
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();

function init() {
    container = document.getElementById("threeScene");
    renderer = new THREE.WebGLRenderer();
    renderer.autoClearColor = false;
    container.appendChild( renderer.domElement );
    renderer.setSize(container.clientWidth, container.clientHeight);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 40, container.clientWidth / container.clientHeight, 1, 10000 );
    camera.position.set( 120, 60, 180 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    let light = new THREE.DirectionalLight( 0xffffff, 2 );
    light.position.set( 300, 200, 100 );
    scene.add( light );
    scene.add( new THREE.AxesHelper( 20 ) );
    window.addEventListener( 'resize', onWindowResize, false );
    document.addEventListener( 'mousedown', onMouseDown );
    document.addEventListener( 'mousemove', onMouseMove );
}

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

function onWindowResize(){
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( container.clientWidth, container.clientHeight );
}

function onMouseMove(event) {
  mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
  mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
	raycaster.setFromCamera( mouse, camera );

  let intersects = raycaster.intersectObjects( spheres );
  if ( intersects.length > 0 ) {
  	onObjHover(intersects[0]);
  }

}

function onMouseDown(event) {
  mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
  mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) /...