7037342016266567711）

//代码<br>  //模板
<template>
  <div class="main">
    <div class="view-container" ref="threeDBox"></div>
  </div>
</template>
 
<script setup>
  import { onMounted, ref } from 'vue';
  import * as THREE from "three";
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
   
  let threeDBox = ref()
 
onMounted(async () => {
  let picList = ["right","left","up","down","front","back"];
  var scene = new THREE.Scene();
  var material2 = []
   
  for(let i=0;i<picList.length;i++){
    material2.push(`${picList[i]}.png`)
  }
  scene.background= new THREE.CubeTextureLoader().load(material2);
 
  /**
   * 相机设置
   */
  var width = window.innerWidth; //窗口宽度
  var height = window.innerHeight; //窗口高度
  var camera = new THREE.PerspectiveCamera(72, width / height, 100, 1000); //相机类型需要时这种     
  camera.position.set(0, 0, 500); //设置相机位置
  camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
 
  //渲染器
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
 
  //控制器
  var controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
  controls.addEventListener('change', function(){
    renderer.render(scene,camera)
    requestAnimationFrame()
  });
 
  threeDBox.value.appendChild(renderer.domElement); //body元素中插入canvas对象
   
  setTimeout(() => {
    renderer.render(scene,camera)
  }, 100);
 
})
 
 
</script>　

1	`效果如下<br><br>图片来自这个网站 <a href="https://vr.quanjing.com/image/qp63250896"` `rel="noopener nofollow">全景图VR素材_全景图全景VR素材_全景360VR素材 (quanjing.com)</a><br><br>`