circle.min.js

var canvas,camera,scene,renderer,controls,raycaster,mouse,material,gallerie3dCanvas,canvasWidth,canvasHeight,rayon,maxWidth,maxHeight,bgcolor,ratio,timeOutFunctionId,target=0,fogFactor=.0015;import*as THREE from"https://unpkg.com/three@0.127.0/build/three.module.js";import{OrbitControls}from"https://threejs.org/examples/jsm/controls/OrbitControls.js";function init(){gallerie3dCanvas=document.querySelector("#circle3dCanvas"),canvasWidth=gallerie3dCanvas.clientWidth,canvasHeight=gallerie3dCanvas.clientHeight,rayon=(ratio=canvasWidth/canvasHeight)>=1?canvasWidth/2:canvasWidth,maxWidth=canvasWidth/4,maxHeight=canvasHeight/4,bgcolor=gallerie3dCanvas.getAttribute("data-background"),(scene=new THREE.Scene).background=new THREE.Color(bgcolor),scene.fog=new THREE.FogExp2(bgcolor,fogFactor),raycaster=new THREE.Raycaster,mouse=new THREE.Vector2;const e=document.querySelectorAll("#circle3dImg img");for(var t=0;t<e.length;t++){if(ratio>=1)var a=maxHeight/e[t].getAttribute("data-height")*e[t].getAttribute("data-width"),r=new THREE.PlaneGeometry(a,maxHeight,1);else{var n=maxWidth/e[t].getAttribute("data-width")*e[t].getAttribute("data-height");r=new THREE.PlaneGeometry(maxWidth,n,1)}var i=e[t].getAttribute("src"),o=(new THREE.TextureLoader).load(i,function(){});material=new THREE.MeshBasicMaterial({map:o,side:THREE.DoubleSide,transparent:!0,opacity:.6});var s=new THREE.Mesh(r,material),c=2*Math.PI/e.length*t;s.position.z=Math.cos(c)*rayon,s.position.x=Math.sin(c)*rayon,s.rotation.y=c,scene.add(s)}if(ratio>=1)var l=canvasHeight/canvasWidth*145;else l=canvasWidth/canvasHeight*120;(camera=new THREE.PerspectiveCamera(l,canvasWidth/canvasHeight,.1,4*rayon)).position.x=0,camera.position.y=0,camera.position.z=rayon+rayon/3.5,(renderer=new THREE.WebGLRenderer({antialias:!0,canvas:circle3dCanvas})).setSize(canvasWidth,canvasHeight),renderer.domElement.addEventListener("mousemove",onClick,!1),window.addEventListener("resize",onWindowResize),(controls=new OrbitControls(camera,renderer.domElement)).autoRotate=!0,controls.enableDamping=!0,controls.dampingFactor=.02,controls.enableZoom=!1,controls.rotateSpeed=.2,ratio<=1&&(controls.rotateSpeed=.4),controls.autoRotateSpeed=.4,controls.maxPolarAngle=Math.PI/1.95,controls.minPolarAngle=Math.PI/2.05}function onClick(){event.preventDefault(),mouse.x=event.offsetX/canvasWidth*2-1,mouse.y=-event.offsetY/canvasHeight*2+1,raycaster.setFromCamera(mouse,camera);var e=raycaster.intersectObject(scene,!0);target=e.length>0?e[0].object:0}function onWindowResize(){clearTimeout(timeOutFunctionId),timeOutFunctionId=setTimeout(resizedw,500)}function resizedw(){init()}function animate(){0!=target?scene.traverse(function(e){e.isMesh&&(e.material.opacity>.6&&e.uuid!=target.uuid&&(e.material.opacity-=.01),target.material.opacity<1&&(target.material.opacity+=.05))}):scene.traverse(function(e){e.isMesh&&e.material.opacity>.6&&(e.material.opacity-=.01)}),requestAnimationFrame(animate),material.needsUpdate=!0,controls.update(),camera.updateProjectionMatrix(),renderer.render(scene,camera)}init(),animate();