<!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>
        <div id="info">
            <a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.<br />
            drag equirectangular texture into the page.
        </div>

        <script src="../build/three.js"></script>

        <script>

            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( 'textures/quanjing1.jpg' )
                } );

                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>

three.js全景的更多相关文章

  1. three.js全景漫游实践

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 简介 全景图分两种 由六张正方形图片组成的SkyBox 一整张的宽高比为 ...

  2. 现在做 Web 全景合适吗？

    Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看.它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体.随着一些运营商推出大王卡等 ...

  3. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  4. three.js 实现全景以及优化（2）

    继昨天全景实现后,再做了一个全景图切换实验; code:https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/inde ...

  5. three.js 实现全景以及优化（1）

    实现一个三维全景;  然后思考优化问题; 于是我问了下webgl技术交流群朋友有啥解决方案; 对于krpano.js 的了解,只是知道百度全景用了这个技术; 最后还是选择了群友给出的three.js  ...

  6. 全景播放器-js+flash

    经过一个多月的辛苦,全景播放展示平台终于做出来了,主要用到的是js+flash技术.有什么不足的地方园子里的兄弟还请多多指教啊 <iframe  src="http://www.ipa ...

  7. <Three.js>（第三节）全景漫游

    一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...

  8. 基于Three.js的全景---photo-sphere-viewer

    以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件  photo-sphere-viewer.js  ...

  9. Three.js 实现3D全景侦探小游戏🕵️

    背景 你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石‍提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...

随机推荐

  1. C#语言之“中英文混合字符串对齐”的方法

    参考自:(1)http://www.cnblogs.com/cnluoke/articles/1213398.html (2)http://www.cnblogs.com/sql4me/archive ...

  2. 3D游戏编程大师技巧──2D引擎的编译问题

    接上一篇文章,这里将介绍2D引擎的编译,从现在开始才真正进入<3D游戏编程大师技巧>的学习.本书的第一.二章只是简介了游戏编程和windows编程,从第三章开始才是介绍<window ...

  3. Mac Pro 编译安装 Redis 的 PHP 客户端 phpredis

    1.去官网下载 redis 扩展源码包 https://github.com/phpredis/phpredis 2.安装 redis 扩展 /usr/local/src/mac-sdk/source ...

  4. 关于es5的一些新方法

    1.数组方法(1)isArray在之前我们判断数组类型的数据都是用instanceof来判断的,es5新增了对数组的判断,即Array.isArray()(2)every和some这两个方法一般用于对 ...

  5. Visual Studio 默认保存为UTF8编码

    Visual Studio (中文版)默认保存的文本文件是GB2312编码(代码页936)的,默认的行尾(End of line)是CRLF的. 如果仅仅是在windows下开发问题也不大,但是涉及到 ...

  6. 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  7. html5——canva 绘图1简单图形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. NSIS对话框单位造成的控件移位问题

    在使用NSIS脚本开发安装卸载程序,使用自定义的nsdialog控件.发现在小部分系统上安装时,一些控件会消失,或者挪位.于是排除问题,看看这些控件的为位置和坐标,发现基本上是使用了对话框单位的控件, ...

  9. 三妹，我拆了你的本-- Day One（大图赏）

    从垃圾箱中捡到了三妹的笔记本,虽然显卡已烧,硬盘和内存已被掳走,但依旧很高兴的说,因为我的目的是要拆了它. 这是我的第一次,所以本文的内容完全是新手猎奇,高手勿喷~ 步骤1:拆掉塑料外壳 不要忘了硬盘 ...

  10. 求一个区间[a,b]中数字1出现的次数

    问题来源:http://ac.jobdu.com/problem.php?pid=1373 举例:如果n=10 那么1-10之间的1的个数是2(1,2,3,4,...10) 这其中有一个规律: 挨着看 ...