three.js全景

<!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全景的更多相关文章

three.js全景漫游实践
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址简介全景图分两种由六张正方形图片组成的SkyBox 一整张的宽高比为 ...
现在做 Web 全景合适吗？
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看.它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体.随着一些运营商推出大王卡等 ...
基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
three.js 实现全景以及优化（2）
继昨天全景实现后,再做了一个全景图切换实验; code:https://github.com/Thinkia/threejs_/blob/master/test/test1-panorama/inde ...
three.js 实现全景以及优化（1）
实现一个三维全景; 然后思考优化问题; 于是我问了下webgl技术交流群朋友有啥解决方案; 对于krpano.js 的了解,只是知道百度全景用了这个技术; 最后还是选择了群友给出的three.js ...
全景播放器-js+flash
经过一个多月的辛苦,全景播放展示平台终于做出来了,主要用到的是js+flash技术.有什么不足的地方园子里的兄弟还请多多指教啊 <iframe src="http://www.ipa ...
<Three.js>（第三节）全景漫游
一.实验内容通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...
基于Three.js的全景---photo-sphere-viewer
以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件 photo-sphere-viewer.js ...
Three.js 实现3D全景侦探小游戏🕵️
背景你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石‍提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...

随机推荐

Spring4读书笔记（1）-模块
Srping主要模块 Core Container spring-core,spring-beans: 提供基础功能,包括IoC和DI等特性.对依赖起到解耦作用(BeanFactory). sprin ...
int与CString互相转化
int num; CString str; //int转CString num=; str.Format(_T("%d"),num); //CString转int str=L&qu ...
数据结构-浙大 MOOC 笔记一基本概念
做一些笔记记录自己的学习过程第一节课介绍了数据结构的基本概念,首先没有直接给出相关的定义而是通过思考如何在书架上摆放书籍这样一个简单的类比了解到数据的组织方式的重要性,并通过printN函数的循环实 ...
toast组件小结
简介:toast是"吐司"的意思,它属于android杂项组件,是一个简单的消息提示框,类似于javascript中的alert. 作用显示文本显示图片显示图文 3.常用方法 ...
C#接口的作用(经典)
C#接口是一个让很多初学C#者容易迷糊的东西,用起来好像很简单,定义接口,里面包含方法,但没有方法具体实现的代码,然后在继承该接口的类里面要实现接口的所有方法的代码,但没有真正认识到接口的作用的时候就 ...
thinkpad W500S 如何换键盘？
tHINKPAD的笔记本拆装有,123456789... 至少5种以上了,一般键盘去下都是边上撬就去下来了.今天拆换W550S键盘就遇到劲敌了.拼了老劲也去不下,冬天背上都冒汗(屋子热的吧). 终 ...
iOS self
如果self在对象方法中那么self就代表调用当前对象方法的那个对象如果self在类方法中那么self就代表调用当前类方法的那个类总结:self的使用只需关注self在哪个方法中如果在类方法 ...
有人要分享pjax吗？
安装 1.在 composer.json 的 require里加入 "yuanchao/pjax-for-laravel-5": "dev-master" 2 ...
APM程序分析-Control_rtl.cpp
bool Copter::rtl_init(bool ignore_checks) { if (position_ok() || ignore_checks) { rtl_build_path(!fa ...
js如何求一组数中的极值
这是一个很简单的问题,现在我们从循环开始,例如一组数[5,2,1,3,4];求其中的最大值,那么首先我们要定义一个max的中间变量,遍历数组,当遇到比max值大则赋值给max,直到循环结束,就能获取这 ...

three.js全景

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

随机推荐

热门专题