dowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { var container, mesh; container = document.getElementById( 'cont3601' ); /*camera = new THREE.PerspectiveCamera( 90, window.innerWidth / (window.innerHeight / 2) , 1, 1100 );*/ camera = new THREE.PerspectiveCamera( 90, 1440 / 780, 1, 1100 ); camera.target = new THREE.Vector3( 0, 0, 0 ); scene = new THREE.Scene(); var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ); // invert the geometry on the x-axis so that all of the faces point inward geometry.scale( - 1, 1, 1 ); var Mytexture = new THREE.TextureLoader().load( 'https://vrvprod.fr/wp-content/uploads/2018/12/tcmd.jpg' ); Mytexture.minFilter = THREE.LinearFilter; Mytexture.magFilter = THREE.LinearFilter; var material = new THREE.MeshBasicMaterial( { map: Mytexture } ); /*var material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'https://vrvprod.fr/wp-content/uploads/2018/12/honfleur.jpg' ) } );*/ mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousedown', onPointerStart, false ); document.addEventListener( 'mousemove', onPointerMove, false ); document.addEventListener( 'mouseup', onPointerUp, false ); // document.addEventListener( 'wheel', onDocumentMouseWheel, false ); document.addEventListener( 'touchstart', onPointerStart, false ); document.addEventListener( 'touchmove', onPointerMove, false ); document.addEventListener( 'touchend', onPointerUp, false ); // document.addEventListener( 'dragover', function ( event ) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; }, false ); document.addEventListener( 'dragenter', function () { document.body.style.opacity = 0.5; }, false ); document.addEventListener( 'dragleave', function () { document.body.style.opacity = 1; }, false ); document.addEventListener( 'drop', function ( event ) { event.preventDefault(); var reader = new FileReader(); reader.addEventListener( 'load', function ( event ) { material.map.image.src = event.target.result; material.map.needsUpdate = true; }, false ); reader.readAsDataURL( event.dataTransfer.files[ 0 ] ); document.body.style.opacity = 1; }, false ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onPointerStart( event ) { isUserInteracting = true; //var clientX, clientY; if (event.clientX) { var clientX = event.clientX; } else { clientX = event.touches[ 0 ].clientX; } if (event.clientY) { var clientY = event.clientY; } else { clientY = event.touches[ 0 ].clientY; } // var clientX = event.clientX //event.touches[ 0 ].clientX; // var clientY = event.clientY //event.touches[ 0 ].clientY; onMouseDownMouseX = clientX; onMouseDownMouseY = clientY; onMouseDownLon = lon; onMouseDownLat = lat; } function onPointerMove( event ) { //var clientX, clientY; if (event.clientX) { var clientX = event.clientX; } else { clientX = event.touches[ 0 ].clientX; } if (event.clientY) { var clientY = event.clientY; } else { clientY = event.touches[ 0 ].clientY; } //var clientX = event.clientX && event.touches[ 0 ].clientX; //var clientY = event.clientY && event.touches[ 0 ].clientY; lon = ( onMouseDownMouseX - clientX ) * 0.2 + onMouseDownLon; lat = ( clientY - onMouseDownMouseY ) * 0.02 + onMouseDownLat; //lon = ( windowHalfX - clientX ) * 0.2 + onMouseDownLon; //lat = ( clientY - windowHalfY ) * 0.02 + onMouseDownLat; } function onPointerUp() { isUserInteracting = false; } /* function onDocumentMouseWheel( event ) { var fov = camera.fov + event.deltaY * 0.05; camera.fov = THREE.Math.clamp( fov, 10, 75 ); camera.updateProjectionMatrix(); } */ function animate() { requestAnimationFrame( animate ); update(); } function update() { if ( isUserInteracting === false ) { lon += 0.02; } lat = Math.max( - 85, Math.min( 85, lat ) ); phi = THREE.Math.degToRad( 100 - lat ); theta = THREE.Math.degToRad( lon ); camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta ); camera.target.y = 500 * Math.cos( phi ); camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta ); camera.lookAt( camera.target ); /* // distortion camera.position.copy( camera.target ).negate(); */ renderer.render( scene, camera ); }