教你用3行代码实现360度全景小星球，超简单「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑

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

背景

panolensjs是一个非常有趣的threejs扩展库，上一次我用panolensjs实现了一个360度的全景图（教你用3步代码实现360度全景图，超简单），因为panolensjs的操作非常简单，实现的效果有十分的炫酷，对于初学threejs的新手小白程序员来说，是非常友好的。因为上一篇文章的点赞和收藏都还不错，于是我决定再用panolensjs实现一个360度全景小星球，同样这次的代码也很简单只有三行，同时效果也很炫酷，废话不多说接下来我们就来实现它吧！

技术

介绍

1. threejs

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

2. panolensjs

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

`panolensjs`文档

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…

css 代码

样式初始化

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    background-color: #000;
}

引入js库

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

js 代码

容器初始化

var viewer = new PANOLENS.Viewer({ 
    controlBar: false 
    });

设置小行星初始化

var littlePlanet = new PANOLENS.ImageLittlePlanet("https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/planet.jpg");

把小行星放在容器里

viewer.add(littlePlanet);

效果展示

动画1.gif

效果总结

虽然这个360度全景小星球，实现起来很简单，只有三行代码，不过我们可以去研究其中的配置和参数，是他更加符合你的实际情况。具体的配置和参数大家可以参考panolensjs的文档，还有panolensjs是依赖threejs的所以他两的版本最好统一，不然有可能出现不能使用的情况。

`panolensjs`总结

panolensjs是一个可玩性很高的threejs扩展库，它的官网上有很多用panolensjs实现的例子，比如用panolensjs实现的谷歌街景，或者是增加锚点，可以加上提示和操作，等等功能，在这里我就不说太多了，大家可以去它的官网上阅读，希望对大家有所帮助。

教你用3步代码实现360度全景图，超简单教你实现超级炫酷的粒子光，超级简单

教你用3行代码实现360度全景小星球，超简单

背景

技术

介绍

1. threejs

2. panolensjs

panolensjs文档

实现

准备