vue 使用PanoLens.js 实现vr

1、下载PanoLens.js与three.js

1.下载 [PanoLens.js]
链接:https://pan.baidu.com/s/10XwXAT57JXXfkU0YDIfgxw
提取码:1111
2.通过npm i three安装three.js

2、引入

import * as PanoLens from '@/assets/panolens/panolens';

3、 使用

<template>
    <div class="panolens-container" style="height:90vh">
    </div>
</template>

<script>
    import * as PanoLens from '@/assets/panolens/panolens2';
    export default {
        name: '',

        components: {},
        data() {
            return {
                viewer: null,
                littlePlanet: null
            }
        },
        props: {},
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.viewer = new PanoLens.Viewer({
                    controlBar: false,
                    container: this.$el,
                    cameraFov: 100
                });
                this.littlePlanet = new PanoLens.ImageLittlePlanet(require('@/assets/360.jpg'));
                this.viewer.add(this.littlePlanet);
            }
        }
    }
</script>

<style lang='scss' scoped>

</style>

注意:three版本必须是0.105.2

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容