教你用3步代码实现360度全景图，超简单

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

背景

谈起360度全景图，坚信对喜好拍摄的小伙伴们而言一定不生疏，360度全景图对比于一般的拍摄制作而言较大的差别便是可互动和沉浸式体验。

360度全景图让客户能够360度无死角的收看场景中的随意角度，而且能够前后左右随便拖动，还能够变大变小等，让客户真实如实际中一样开展随便收看，就好像置身场景当中一般，不论是城市街景、旅游景点還是室内空间设计，酒店客房都能够利用360度全景拍摄开展展现。在大家必须真正、全方位、形象化的主要表现某一场景时，VR全景图毫无疑问是最好是的挑选展示方法。

技术

介绍

1. threejs

threejs是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

2. panolensjs

panolensjs是基于threejs（一个3D框架），主要研究领域是全景、虚拟现实和潜在的增强现实。

文档

github: github.com/pchen66/pan…

文档： pchen66.github.io/Panolens/#D…

实现

准备

在写代码前我们要准备好一下几个东西：

three.min.js : pchen66.github.io/panolens.js…

panolens.min.js: pchen66.github.io/panolens.js…

360图片 : pchen66.github.io/panolens.js…

开始

1. 创建一个html和文件夹，如下图

html 代码

创建一个容器

    <div id="container"></div>

css 代码

 html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

#container {
    width: 100%;
    height: 100%;
}

引入js插件

<script src="./js/three.min.js"></script>
 <script src="./js/panolens.min.js"></script>

js 代码

初始化容器和部分设置

let viewer = new PANOLENS.Viewer({
    container: document.querySelector('#container'),
    controlButtons: ['fullscreen', 'setting', 'video'],
    autoRotate: true, //自动播放
    autoRotateActivationDuration: 2000, //时长
    autoRotateSpeed: 0.3 //速度
});

加入图片(图片地址要是线上地址)

let panorama = new PANOLENS.ImagePanorama('https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/view.jpg');

把图片放在容器里

viewer.add(panorama);

效果如下：

动画.gif

vue3.0 + ts + threejs 实现3D 文字(hello juejin)和demo详解

用 threejs 实现旋转的掘金logo