三种前端实现VR全景看房的方案！说不定哪天就用得上！

太过爱你忘了你带给我的痛 2022-10-08 14:25 24阅读 0赞

# 前言    #

事情是这样的，前几天我接到一个`外包工头`的新需求，某品牌要搭建一个在线VR展厅，用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅，这个VR展厅里会有一些信息点，点击之后可以呈现更多信息（视频，图文等）...

![f79ca3e8229a167a550d41d649f48809.png][] image.png

我第一反应是用3D引擎，因为我不久前刚用`three.js`做过一个`BMW`的在线展厅，基本把`three.js`摸熟了。

![3e4fdc435da3d861413b41f6a187ec91.gif][] 2021-06-03 11\_01\_41.gif

> 会另写一篇文章教大家用threejs做这个\[BMW在线DIY\]，感兴趣的小伙伴请关注我吧~

# 方案一：WebGL3D引擎 #

使用3D引擎先搭一个基本的3D场景，下面的演示使用three.js，同类的3D引擎我还调研过babylon.js，playcanvas，使用都差不太多，学会一个基本都通的

var scene, camera, renderer;
    
    function initThree(){
        //场景
        scene = new THREE.Scene();
        //镜头
        camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
        camera.position.set(0, 0, 0.01);
        //渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(document.body.clientWidth, document.body.clientHeight);
        document.getElementById("container").appendChild(renderer.domElement);
        //镜头控制器
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        
        //一会儿在这里添加3D物体
    
        loop();
    }
    
    //帧同步重绘
    function loop() {
        requestAnimationFrame(loop);
        renderer.render(scene, camera);
    }
    
    window.onload = initThree;

现在我们能看到一个黑乎乎的世界，因为现在`scene`里什么都没有，接着我们要把三维物体放进去了，使用3D引擎的实现方式无非都是以下几种

## 使用立方体（box）实现 ##

> 这种方式最容易理解，我们在一个房间里，看向天花板，地面，正面，左右两面，背面共计六面。我们把所有六个视角拍成照片就得到下面六张图

![2ea233750d3191cc010479b17df3aad3.png][] image.png

现在我们直接使用立方体（box）搭出这样一个房间

var materials = [];
    //根据左右上下前后的顺序构建六个面的材质集
    var texture_left = new THREE.TextureLoader().load( './images/scene_left.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_left} ) );
    
    var texture_right = new THREE.TextureLoader().load( './images/scene_right.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_right} ) );
    
    var texture_top = new THREE.TextureLoader().load( './images/scene_top.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_top} ) );
    
    var texture_bottom = new THREE.TextureLoader().load( './images/scene_bottom.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_bottom} ) );
    
    var texture_front = new THREE.TextureLoader().load( './images/scene_front.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_front} ) );
    
    var texture_back = new THREE.TextureLoader().load( './images/scene_back.jpeg' );
    materials.push( new THREE.MeshBasicMaterial( { map: texture_back} ) );
    
    var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), materials );
    scene.add(box);

![78affa82b105e0ed567b9655a6708dc1.gif][] 2021-06-14 19\_51\_17.gif

好，现在我们把镜头camera（也就是人的视角），放到box内，并且让所有贴图向内翻转后，VR全景就实现了。

box.geometry.scale( 1, 1, -1 );

**现在我们进入了这个盒子！！**

![4b12154677075f0bfe0b68ebb8ba5669.gif][] 2021-06-14 19\_41\_37.gif

threejs官方立方体全景示例

## 使用球体（sphere）实现 ##

> 我们将房间360度球形范围内所有的光捕捉到一个图片上，再将这张图片展开为矩形，就能得到这样一张全景图片

![50e01e5ce64262949775d45f46d68fab.png][] image.png

var sphereGeometry = new THREE.SphereGeometry(/*半径*/1, /*垂直节点数量*/50, /*水平节点数量*/50);//节点数量越大，需要计算的三角形就越多，影响性能
    
    var sphere = new THREE.Mesh(sphereGeometry);
    sphere.material.wireframe  = true;//用线框模式大家可以看得清楚是个球体而不是圆形
    scene.add(sphere);

![0559a399e723fb726a545f9557b5d31c.png][] image.png

现在我们把这个全景图片贴到这个球体上

var texture = new THREE.TextureLoader().load('./images/scene.jpeg');
    var sphereMaterial = new THREE.MeshBasicMaterial({map: texture});
    
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    // sphere.material.wireframe  = true;

![950847aefcfbc481816ea67ca4e60ef4.gif][] 2021-06-14 14\_54\_38.gif

和之前一样，我们把镜头camera（也就是人的视角），放到球体内，并且让所有贴图向内翻转后，VR全景就实现了

**现在我们进入了这个球体！！**

var sphereGeometry = new THREE.SphereGeometry(/*半径*/1, 50, 50);
    sphereGeometry.scale(1, 1, -1);

![1c8f1d2350715ef076c1ab2fe254cce7.gif][] 2021-06-14 15\_15\_28.gif

threejs官方球体全景示例

## 添加信息点 ##

> 在VR全景中，我们需要放置一些信息点，用户点击之后做一些动作。

现在我们建立这样一个点的数组

var hotPoints=[
        {
            position:{
                x:0,
                y:0,
                z:-0.2
            },
            detail:{
                "title":"信息点1"
            }
        },
        {
            position:{
                x:-0.2,
                y:-0.05,
                z:0.2
            },
            detail:{
                "title":"信息点2"
            }
        }
    ];

遍历这个数组，并将信息点的指示图添加到3D场景中

var pointTexture = new THREE.TextureLoader().load('images/hot.png');
    var material = new THREE.SpriteMaterial( { map: pointTexture} );
    
    for(var i=0;i<hotPoints.length;i++){
        var sprite = new THREE.Sprite( material );
        sprite.scale.set( 0.1, 0.1, 0.1 );
        sprite.position.set( hotPoints[i].position.x, hotPoints[i].position.y, hotPoints[i].position.z );
    
       scene.add( sprite );
    }

**看到HOT指示图了吗？**

![33d2e25c72967366f47620b075085b12.gif][] 2021-06-14 20\_22\_12.gif

添加点击事件，首先将全部的sprite放到一个数组里

sprite.detail = hotPoints[i].detail;
    poiObjects.push(sprite);

然后我们通过射线检测（raycast），就像是镜头中心向鼠标所点击的方向发射出一颗子弹，去检查这个子弹最终会打中哪些物体。

![f7d38152ceaa8a1b299047dd22b1dc62.gif][] 2021-06-15 01\_35\_14.gif

document.querySelector("#container").addEventListener("click",function(event){
        event.preventDefault();
    
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
    
        mouse.x = ( event.clientX / document.body.clientWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / document.body.clientHeight ) * 2 + 1;
    
        raycaster.setFromCamera( mouse, camera );
    
        var intersects = raycaster.intersectObjects( poiObjects );
        if(intersects.length>0){
            alert("点击了热点"+intersects[0].object.detail.title);
        }
    });

# 方案二：CSS3D #

`threejs`等3d引擎太强大了，这些引擎的代码量都有大几百K，在今天的网速下显得无所谓，但在几年前我接到需求时仍然是重要的考量因素。既然我们只用到3D引擎的一点点功能，那么能否找到一个更加轻量的3D引擎呢。

有！css3d-engine，这个3d引擎只有`14kb`，并且在多个大牌商业项目中应用

*  淘宝造物节 https://shrek.imdevsh.com/show/zwj/
 *  adidas绝不凋谢 https://shrek.imdevsh.com/show/drose/
 *  adidas胜势全开 https://shrek.imdevsh.com/show/bbcny/
 *  adidas绝不跟随 https://shrek.imdevsh.com/show/crazylight/

## 使用skybox实现 ##

方案二的好处除了库很小以外，还是div+css来搭建三维场景的。但这个库的作者几乎不维护，遇到问题必须得自己想办法解决，比如使用在电脑上会看到明显的面片边缘

![d0eeae2635817ccf5ad63864abf3fc14.png][] image.png

但是在手机上浏览的话表现还是相当完美的

![5def580e07a425c990bda1c6e4ae9e2f.gif][] 2021-06-14 22\_20\_26.gif

## 添加信息点 ##

我们继续为它添加可交互的信息点

var hotPoints=[
        {
            position:{
                x:0,
                y:0,
                z:-476
            },
            detail:{
                "title":"信息点1"
            }
        },
        {
            position:{
                x:0,
                y:0,
                z:476
            },
            detail:{
                "title":"信息点2"
            }
        }
    ];

function initPoints(){
        var poiObjects = [];
        for(var i=0;i<hotPoints.length;i++){
            var _p = new C3D.Plane();
    
            _p.size(207, 162).position(hotPoints[i].position.x,hotPoints[i].position.y,hotPoints[i].position.z).material({
                image: "images/hot.png",
                repeat: 'no-repeat',
                bothsides: true,//注意这个两面贴图的属性
            }).update();
            s.addChild(_p);
    
            _p.el.detail = hotPoints[i].detail;
    
            _p.on("click",function(e){
                console.log(e.target.detail.title);
            })
        }
    }

这样就可以显示信息点了，并且由于是div，我们非常容易添加鼠标点击交互等效果

![2a0a6edf36ea937431136f1abeddfa54.png][] image.png

不过，`bothsides`属性为true时，背面的信息点图片是反的。

![3b50387dc0edd8293c8f4e801b7b6200.png][] image.png

所以我们这里要做一点处理，根据其与相机的夹角重置一下信息点的旋转角度。（`如果是那种怎么旋转都无所谓的图片，比如圆点则无需处理`）

var r = Math.atan2(hotPoints[i].position.z-0,0-0) * 180 / Math.PI+90;
    _p.size(207, 162).position(hotPoints[i].position.x,hotPoints[i].position.y,hotPoints[i].position.z).material({
                image: "images/hot.png",
                repeat: 'no-repeat',
                bothsides: false,
            }).update();

# 需求升级了！ #

以上两个方案，我以为可以给客户交差了。但客户又提出了一些想法

*  **全景图质量需要更高，但加载速度不允许更慢**
 *  **每个场景的信息点挺多的，坐标编辑太麻烦了**

当时我心里想，总共才收你万把块钱，难不成还得给你定制个引擎，再做个可视化编辑器？

![a9659d9151b29c42cb2b9e60d555c725.png][]

直到客户发过来一个参考链接，我看完`惊呆了`，全景图非常清晰，但首次加载速度极快，像百度地图一样，是一块块从模糊到清晰被加载出来的。

![9bf33bbc22cbd74cd3c1f12e9c69a7e2.gif][] 2021-06-14 23\_31\_28.gif

通过检查参考链接网页的代码，发现了方案三

# 方案三：pano2vr #

![06fefc12d96a429ad2698ab5824f65f4.png][] image.png

pano2vr是一款所见即所得的全景VR制作软件（正版149欧元），功能挺强大的，可以直接输出成HTML5静态网页，体验非常不错。

而其核心库`pano2vr_player.js`代码量也只有`238kb`。

![02f95ad5a870630a423c0588dd68b0b9.png][] image.png

我们可以直接使用这个软件来可视化的添加信息点，输出成HTML5后，除了静态图片以外，所有配置信息都在这个`pano.xml`文件里

![06f4716227342ff0d04e54a4604b2899.png][] image.png

## 修改信息点图片 ##

整体的交互体验都非常好，但默认的信息点样式不喜欢，我们可以通过下面的代码来修改信息点图片

pano.readConfigUrlAsync("pano.xml",()=>{
        var pois=pano.getPointHotspotIds();
    
        var hotScale = 0.2;
    
        for(var i=0;i<pois.length;i++){
                var ids=pois[i];
                var hotsopt=pano.getHotspot(ids);
                hotsopt.div.firstChild.src="images/hot.png";
                hotsopt.div.firstChild.style.width = 207*hotScale+"px";
                hotsopt.div.firstChild.style.height = 162*hotScale+"px";
                hotsopt.div.onmouseover = null;
                hotsopt.div.setAttribute("ids",ids);
                hotsopt.div.onclick=function() {
                       //在这里可以响应信息点的点击事件啦
                       console.log(this.getAttribute("ids"));
                };
        }
    });

哈哈，没想到最终的方案不仅极其简单的就实现了体验良好的VR全景，还附送了非常方便的信息点编辑。除去第一次开发的耗时，以后再制作新的VR场景也就是花个10分钟即可搞定。

但想到`外包工头`经常*压榨我的报价，压缩我的工期，无理变更需求*

收到工程款的时候他请我去K歌，坐在KTV的包间里我没有告诉他使用pano2vr的事，而是对他说

**每个VR场景的信息点都要花1天时间编辑**

**每制作一个新的VR场景，你收品牌方8k**

**我每个场景收你3k，你躺赚5k**

**毕竟咱们老朋友了，我够意思吧**

他豪爽的干掉手中的啤酒说：“好兄弟，我给你唱一首！”

![151f6ecf7f22be9d75acf51380438c9a.png][] image.png

--------------------

本故事纯属虚构，文末配图如有侵权，请联系我跟老板大哥喝一杯

查看本文配套视频教程

# 源码 #

关注“程序员成长指北”，回复“`webvr`”获得本文中三种方案的实现源码

如果觉得这篇文章还不错

点击下面卡片关注我

来个【分享、点赞、在看】三连支持一下吧![bb720fb323550fcc2757286cea7b09ec.png][]

![903caf1d0ae8f34a9f101ed1a6d5604b.png][]

“分享、点赞、在看” 支持一波

[f79ca3e8229a167a550d41d649f48809.png]: /images/20221005/9e738181c08249db93458796f359500c.png
[3e4fdc435da3d861413b41f6a187ec91.gif]: /images/20221005/06dc55ffb05449649c3e601b64ec605e.png
[2ea233750d3191cc010479b17df3aad3.png]: /images/20221005/81485de8aba946cb8956c24468d9839b.png
[78affa82b105e0ed567b9655a6708dc1.gif]: /images/20221005/75412eaed17e4f4d9ab2846d1d2d94b7.png
[4b12154677075f0bfe0b68ebb8ba5669.gif]: /images/20221005/d0c579a08a7442518676fd6a04dc1e59.png
[50e01e5ce64262949775d45f46d68fab.png]: /images/20221005/168d360007d147b4863e51390de5ab0f.png
[0559a399e723fb726a545f9557b5d31c.png]: /images/20221005/e6bd583a951f447a8d3ef7769a5f96a3.png
[950847aefcfbc481816ea67ca4e60ef4.gif]: /images/20221005/61bf30116f194dfaa142286f45e4ecba.png
[1c8f1d2350715ef076c1ab2fe254cce7.gif]: /images/20221005/ebf0f2f9ee5d4264914efb13712a7a60.png
[33d2e25c72967366f47620b075085b12.gif]: /images/20221005/fbbc06a82a304c4ea2a5acc032e821f5.png
[f7d38152ceaa8a1b299047dd22b1dc62.gif]: /images/20221005/bfc8c46e675f4def823d47bd43803df6.png
[d0eeae2635817ccf5ad63864abf3fc14.png]: /images/20221005/71b6ff99279f4fdfbdd333a125d1f54c.png
[5def580e07a425c990bda1c6e4ae9e2f.gif]: /images/20221005/e26850a3796d453a83604d322299d6a4.png
[2a0a6edf36ea937431136f1abeddfa54.png]: /images/20221005/6759a2e640c241c5afb6236ef4fe3c6c.png
[3b50387dc0edd8293c8f4e801b7b6200.png]: /images/20221005/09a677e882804361b54c9b9d735faa84.png
[a9659d9151b29c42cb2b9e60d555c725.png]: /images/20221005/07df8c7569a04d11847b44d101f28c49.png
[9bf33bbc22cbd74cd3c1f12e9c69a7e2.gif]: /images/20221005/89fe142e9421402d98d531dfda4bcccd.png
[06fefc12d96a429ad2698ab5824f65f4.png]: /images/20221005/2d512abc5bf24efdaab627c6252388cb.png
[02f95ad5a870630a423c0588dd68b0b9.png]: /images/20221005/0b0a26f1abb549818c195910ac764bcd.png
[06f4716227342ff0d04e54a4604b2899.png]: /images/20221005/293ad3979238441998af6d1e64f12c90.png
[151f6ecf7f22be9d75acf51380438c9a.png]: /images/20221005/6c6a68ef4b0a43239e368b299c117091.png
[bb720fb323550fcc2757286cea7b09ec.png]: /images/20221005/905f38ae6e5747e2bb1a67ef11bfc517.png
[903caf1d0ae8f34a9f101ed1a6d5604b.png]: /images/20221005/cf53fb23214146cebcd23b6b94d1f9b8.png