three.js 实现3D漫游

来源：互联网发布：淘宝金币有什么用编辑：程序博客网时间：2024/05/01 12:43
<!DOCTYPE html><html lang="en">    <head>        <title>three.js webgl - equirectangular panorama</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">        <style>            body {                background-color: #000000;                margin: 0px;                overflow: hidden;            }            #info {                position: absolute;                top: 0px; width: 100%;                color: #ffffff;                padding: 5px;                font-family:Monospace;                font-size:13px;                font-weight: bold;                text-align:center;            }            a {                color: #ffffff;            }        </style>    </head>    <body>        <div id="container"></div>        <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>        <script>            var imgUrl = 'https://daoket.github.io/img/three.jpg'            var camera, scene, renderer;//相机 场景 渲染器            var isUserInteracting = false,            onMouseDownMouseX = 0, onMouseDownMouseY = 0,            lon = 0, onMouseDownLon = 0,            lat = 0, onMouseDownLat = 0,            phi = 0, theta = 0;            init();            animate();            function init() {                var container, mesh;                container = document.getElementById( 'container' );                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );//透视投影照相机                camera.target = new THREE.Vector3( 0, 0, 0 );//设置相机所看的位置                scene = new THREE.Scene();//场景                var geometry = new THREE.SphereGeometry( 500, 60, 40 );//SphereGeometry用来在三维空间内创建一个球体对象.                geometry.scale( - 1, 1, 1 );                var material = new THREE.MeshBasicMaterial( { //使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，不会由于光照产生明暗、阴影效果                    map: new THREE.TextureLoader().load(imgUrl)                } );                mesh = new THREE.Mesh( geometry, material );//Mesh（图元装配函数）   生成三维物体                scene.add( mesh );//网格添加到场景中                renderer = new THREE.WebGLRenderer();//定义渲染器                renderer.setPixelRatio( window.devicePixelRatio );                renderer.setSize( window.innerWidth, window.innerHeight );//设定尺寸                container.appendChild( renderer.domElement );//将场景加入到画面                document.addEventListener( 'mousedown', onDocumentMouseDown, false );                document.addEventListener( 'mousemove', onDocumentMouseMove, false );                document.addEventListener( 'mouseup', onDocumentMouseUp, false );                document.addEventListener( 'wheel', onDocumentMouseWheel, false );                //                document.addEventListener( 'dragover', function ( event ) {                    event.preventDefault();                    event.dataTransfer.dropEffect = 'copy';                }, false );                document.addEventListener( 'dragenter', function ( event ) {                    document.body.style.opacity = 0.5;                }, false );                document.addEventListener( 'dragleave', function ( event ) {                    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() {                camera.aspect = window.innerWidth / window.innerHeight;                camera.updateProjectionMatrix();                renderer.setSize( window.innerWidth, window.innerHeight );            }            function onDocumentMouseDown( event ) {                event.preventDefault();                isUserInteracting = true;                onPointerDownPointerX = event.clientX;                onPointerDownPointerY = event.clientY;                onPointerDownLon = lon;                onPointerDownLat = lat;            }            function onDocumentMouseMove( event ) {                if ( isUserInteracting === true ) {                    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;                    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;                }            }            function onDocumentMouseUp( event ) {                isUserInteracting = false;            }            function onDocumentMouseWheel( event ) {                camera.fov += event.deltaY * 0.05;                camera.updateProjectionMatrix();            }            function animate() {                requestAnimationFrame( animate );                update();            }            function update() {                if ( isUserInteracting === false ) {                    lon += 0.1;                }                lat = Math.max( - 85, Math.min( 85, lat ) );                phi = THREE.Math.degToRad( 90 - 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 );            }        </script>    </body></html>
在线观看
0 0