three.js 实现全景图360°_threejs 360全景

作者：繁依Fanyi0 | 2024-02-23 08:51:39

踩

threejs 360全景

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>three.js css3d - panorama</title>
       <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
       <style>
           body {
               background-color: #000000;
               margin: 0;
               cursor: move;
               overflow: hidden;
           }
           a {
               color: #ffffff;
           }
           #info {
               position: absolute;
               width: 100%;
               color: #ffffff;
               padding: 5px;
               font-family: Monospace;
               font-size: 13px;
               font-weight: bold;
               text-align: center;
               z-index: 1;
           }
       </style>
   </head>
   <body>
       <script src="./three.js"></script>
       <script src="./CSS3DRenderer.js"></script>
       <script>
           //定义相机，场景，渲染器，是3D场景形成的三大要素
           var camera, scene, renderer;
           //定义几何体，材质，以及几何体加材质之后形成的网格
           var geometry, material, mesh;
           //生成三维向量（0,0,0），相机的目标点
           var target = new THREE.Vector3();
           //lon 经度竖着的有东经西经；lat 维度横着的有南纬北纬
           //该经纬表示相机的聚焦点，初始状态在前面
           var lon = 90, lat = 0;
           //同样是相机的聚焦点，上面是角度，此处转化为弧度制
           var phi = 0, theta = 0;
           //移动端用户输入的x，y
           var touchX, touchY;

init();
animate();

}

           function onWindowResize() {
               //窗口缩放的时候，保证场景也跟随着一起缩放
               camera.aspect = window.innerWidth / window.innerHeight;
               camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );
}

           function onDocumentMouseDown( event ) {
               event.preventDefault();
               //保证监听拖拽事件
               document.addEventListener( 'mousemove', onDocumentMouseMove, false );
               document.addEventListener( 'mouseup', onDocumentMouseUp, false );
           }

           function onDocumentMouseMove( event ) {
               //鼠标的移动距离 currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
               var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
               var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
               lon -= movementX * 0.1;
               lat += movementY * 0.1;
           }

           function onDocumentMouseUp( event ) {
               //保证监听拖拽事件
               document.removeEventListener( 'mousemove', onDocumentMouseMove );
               document.removeEventListener( 'mouseup', onDocumentMouseUp );
           }

           function onDocumentMouseWheel( event ) {
               //相机的视觉随着鼠标滚动的距离拉进或者远离
               var fov = camera.fov + event.deltaY * 0.05;
               camera.fov = THREE.Math.clamp( fov, 10, 75 );
               camera.updateProjectionMatrix();
           }

           function onDocumentTouchStart( event ) {
               event.preventDefault();
               //移动端没有movement，所以直接用touchX touchY去计算移动的距离
               var touch = event.touches[ 0 ];
               touchX = touch.screenX;
               touchY = touch.screenY;
           }

           function onDocumentTouchMove( event ) {
               event.preventDefault();
               var touch = event.touches[ 0 ];
               lon -= ( touch.screenX - touchX ) * 0.1;
               lat += ( touch.screenY - touchY ) * 0.1;
               touchX = touch.screenX;
               touchY = touch.screenY;
           }
           //开启动画
           function animate() {
               requestAnimationFrame( animate );
               //自动由左向右横向预览全景
               //lon += 0.1;
               lat = Math.max( - 85, Math.min( 85, lat ) );
               phi = THREE.Math.degToRad( 90 - lat ); //角度转为弧度制
               theta = THREE.Math.degToRad( lon );
               //在球坐标系中算出相机的聚焦点的坐标
               target.x = Math.sin( phi ) * Math.cos( theta );
               target.y = Math.cos( phi );
               target.z = Math.sin( phi ) * Math.sin( theta );
               camera.lookAt( target );
               renderer.render( scene, camera );
           }
       </script>
</body>
</html>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/135171