vue2+three.js实现类似VR、3D全景效果

最新推荐文章于 2025-05-06 11:41:16 发布

Js_Zoro

最新推荐文章于 2025-05-06 11:41:16 发布

阅读量4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript vr 3d

本文链接：https://blog.csdn.net/Js_Zoro/article/details/130869822

vue2+three.js实现类似VR、3D全景效果

效果图：
在这里插入图片描述
俩图标是我自己加的前进后退按钮，也是百度了好久，再加上GPT的帮助，才给搞出来。因为需求急，都不看官方文档，百度到一个能跑的demo之后改吧改吧，就先用着了。

下面是代码：

<template>
    <div>
        <div id="container" ref="container"></div>
    </div>
  </template>
  
  <script>
    import * as THREE from 'three';
    import TWEEN from '@tweenjs/tween.js'
    import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls"
    export default {
   
      data () {
   
          return {
   
            sceneIndex:0,
            door:null,
              bigImg: require("../../../assets/555.jpg"), // 图片路径
              container: null, // 页面容器
              camera: null, // 相机
              renderer: null, // 渲染器
              scene: null, // 场景
              material: null,  // 添加材质
              texture: null,// 创建纹理贴图
              skyBox: null, // 网格
              controls: null, // 轨道控制
              clock: null, // 轨道更新时间
              // 鼠标属性
              bMouseDown: false,
              x: -1,
              y: -1,
              isClickCamera: false, // 是否点运动相机
              raycaster: null,
              mouse: null,
              poiObjects:[],
              scenesList:[],//场景列表
              ImageList:[
                '111.jpg',
                '222.jpg',
                '333.jpg',
                '444.jpg',
                '555.jpg',
              ],//场景图片了列表
          }
      },
      mounted () {
   
          this.$nextTick(() => {
   
              this.init();
              this.animate();
          })
      },
      created () {
   
      },
      methods: {
   
          // 初始化轨道控制
          initControls() {
   
              this.controls = new OrbitControls(this.camera, this.renderer.domElement);
              this.controls.target = new THREE.Vector3(0, 0, 0);
              this.controls.minDistance = 18; // 相机最近
              this.controls.maxDistance = 500; // 相机最远
              this.controls.autoRotate = false; // 图片自动旋转
              this.controls.enableDamping = false; // 使动画循环使用时阻尼或自转 意思是否有惯性
              this.controls.enablePan = false; // 是否开启右键拖拽
              this.controls.autoRotateSpeed = 0.5; // 阻尼系数
          },
          init() {
   
              // 页面容器
              this.container = document