three.js 实现3D漫游

原创 2017年04月01日 15:31:05
<!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>

在线观看

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33988065/article/details/68945029

为什么operator=操作符返回引用

VCKBASE Online Help Journal No.10  为什么operator=操作符返回引用 赵湘宁 问题:        MSDN文档中解释到:operator=操作符缺省情况下返回...
  • ghj1976
  • ghj1976
  • 2001-04-03 18:07:00
  • 1521

Threes.js入门篇之6 - 场景漫游

THREE.js 支持两种形式的漫游,第一人称漫游(First Person) 和 飞行(Fly),可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls...
  • linolzhang
  • linolzhang
  • 2017-03-10 23:20:24
  • 659

<Three.js>(第三节)全景漫游

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

全景虚拟漫游实现(three.js)

全景虚拟漫游其实看到很多例子,比如地图上的全景,校园的全景,之前在朋友圈流行转发的公司全景。但真的想起来要去研究或者实现一下,是前几日说工作上可能会有这样的一个需求。觉悟来得太晚,好奇心也不够重,这么...
  • fen747042796
  • fen747042796
  • 2017-02-14 17:47:19
  • 2238

Three.js打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。   QQ物联与深圳市天文台合作,在手Q“发现新设...
  • laokdidiao
  • laokdidiao
  • 2016-04-16 19:29:40
  • 17704

Three.js学习记录——TrackballControls控制器

Three.js提供了许多控制器:实例可见
  • yao800382
  • yao800382
  • 2014-07-02 20:48:31
  • 10609

Three.js中的摄像机

Three.js中的摄像机分为两种:OrthographicCamera和PerspectiveCamera。前者是正投影相机,后者是透视投影相机。下面分别介绍其使用方法。 1.      Orth...
  • u011077271
  • u011077271
  • 2014-10-22 13:43:26
  • 2060

three.js学习笔记 基于物理引擎的第一人称控件

Three.js提供的第一人称控件控制的对象是相机,在物理场景中并不能模拟真实的人物碰撞、移动和跳跃。所以想要实现真实的物理效果还需要自己制作控件(FPControl)。 FPControl 1....
  • u014658748
  • u014658748
  • 2016-06-29 17:31:01
  • 2409

three.js学习笔记 相机控件

Three.js 提供了几个camera(相机)的控件,你可以通过使用控件来控制相机的移动。当然你也可以通过调用camera(相机)的position属性来控制。   camera(相机)控件包括...
  • u014658748
  • u014658748
  • 2016-01-10 13:19:39
  • 2946

使用threejs实现3D全景漫游

最近发现谷歌相机蛮好玩儿的,可以通过拍摄多幅照片将其合成一张全景图,于是我在宿舍中拍摄了宿舍内和阳台的两张全景图,并使用threejs实现了全景漫游。         只是一个简单的全景场景浏览比较...
  • srk19960903
  • srk19960903
  • 2017-09-27 15:48:23
  • 899
收藏助手
不良信息举报
您举报文章:three.js 实现3D漫游
举报原因:
原因补充:

(最多只允许输入30个字)