vue中使用three.js写全景图

最新推荐文章于 2024-07-18 15:06:34 发布

陳陳陳_

最新推荐文章于 2024-07-18 15:06:34 发布

阅读量875

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44271127/article/details/110681791

版权

本文介绍如何在Vue项目中使用Three.js库创建全景图，包括下载three.js库、在Vue组件中引入及HTML和JavaScript代码实现。

摘要由CSDN通过智能技术生成

粗暴一点,直接上代码:
第一步:
通过指令下载three.js

npm install three -S

第二步:
在组件中引用

import * as THREE from 'three'

第三步:
html部分

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

js部分

<script>
    import * as THREE from 'three';
    var camera;
    var renderer;
    var scene;
    export default {
   
        name: 'panorama',
        data() {
   
            return {
   
                bigImg: require("../../../../../images/项目案例/001.jpg"),//全景图图片路径
            }
        },
        mounted() {
   
            // 调用全景图函数
            this.$nextTick(() => {
   
                this.init();
                this.animate();
            })
        },
        methods: {
   
            // 全景图配置函数---------------
            init() {
   
                var container = document.getElementById('container');
                // 创建渲染器
                renderer = new