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 ...
随机推荐
- Open Xml 读取Excel中的图片
在我的一个项目中,需要分析客户提供的Excel, 读出其中的图片信息(显示在Excel的第几行,第几列,以及图片本身). 网络上有许多使用Open Xml插入图片到Word,Excel的文章, 但 ...
- Java性能调优之:idea变慢解决
今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...
- markdown语法与使用
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 语法 # 文本 =>h1标签 ##文本 =>h2标签 *文本* =&g ...
- JDBC之存储过程
存储过程的语法创建就不说了,这里这篇博客 就挺详细了http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html. 1. Java代码调用没有参数的存错过程 ...
- CAIN怎么嗅探路由密码
Cain & Abel 是由Oxid.it开发的一个针对Microsoft操作系统的免费口令恢复工具.号称穷人使用的L0phtcrack.它的功能十分强大,可以网络嗅探,网络欺骗,破解加密口令 ...
- python3 黑板客爬虫闯关游戏(四)
这关较第三关难度增加许多,主要多了并发编程 密码一共有100位,分布在13页,每页打开的时间在15秒左右,所以理所当然的想到要用并发,但是后来发现同IP访问间隔时间不能小于8秒,不然会返回404,所以 ...
- 通过rsync+inotify实现数据的实时备份
我讲到过利用rsync实现数据的镜像和备份,但是要实现数据的实时备份,单独靠rsync还不能实现,本文就讲述下如何实现数据的实时备份. 一.rsync的优点与不足 与传统的cp.tar备份方式相比,r ...
- OC编程之道-创建对象之抽象工厂方法
定义:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类. <AbstractProductA> <AbstractProductB> <Ab ...
- day7
本节作业: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...
- NodeJS+Express下构建后端MVC文件结构
关于MVC的结构大体上有两种方式,其一按照层级进行文件夹分类,其二是按照业务进行文件夹分类.关于这个demo相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...