three.js实现3D全景(vue2)_3d 全景 three

下包

npm i three

引入

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

调用方法（有部分数据要存在data里）

    createThree() {
      // 初始化场景
      this.scene = new THREE.Scene();
 
      // 初始化相机
      this.camera = new THREE.PerspectiveCamera(
        90,
        document.body.clientWidth / document.body.clientHeight,
        0.1,
        100
      );
      this.camera.position.set(0, 0, 0.1);
      // 初始化渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document
        .getElementById("container")
        .appendChild(this.renderer.domElement);
      // 镜头控制器
      var controls = new OrbitControls(this.camera, this.renderer.domElement);
      // //添加3D物体
 
      // 用立方体实现
      // this.useBox();
      // 用全景图实现
      this.useSphere();
 
      // 调用启动渲染帧;
      this.loop();
    },
    loop() {
      requestAnimationFrame(this.loop);
      this.renderer.render(this.scene, this.camera);
    },
    useBox() {
      var materials = [];
      var texture_left = new THREE.TextureLoader().load(
        require("../assets/scene_left.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));
      var texture_right = new THREE.TextureLoader().load(
        require("../assets/scene_right.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));
 
      var texture_top = new THREE.TextureLoader().load(
        require("../assets/scene_top.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));
 
      var texture_bottom = new THREE.TextureLoader().load(
        require("../assets/scene_bottom.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));
 
      var texture_front = new THREE.TextureLoader().load(
        require("../assets/scene_front.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));
 
      var texture_back = new THREE.TextureLoader().load(
        require("../assets/scene_back.png")
      );
      materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));
 
      var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
      // 用线框模式大家可以看得清楚是个立方体而不是矩形
      box.material.wireframe = true;
      this.scene.add(box);
      // 把图片翻转
      box.geometry.scale(1, 1, -1);
 
      // 设置相机位置
      this.camera.position.set(0, 0, 0.01);
    },
    useSphere() {
      let sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
      let texture = new THREE.TextureLoader().load(
        require("../assets/scene.jpeg")
      );
      let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
      let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      // sphere.material.wireframe = true;
      this.scene.add(sphere);
      sphere.geometry.scale(1, 1, -1);
      this.camera.position.set(0, 0, 0.01);
    },

可以用两种方法：立方体（6张图）和球体（全景图）

都是把图贴到物体上，再把图片翻转，把相机移到物体中间即可。