项目中基础全景demo

VUE、three

在vue项目中导入three

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

页面放置一个容器

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

methods中创建初始化方法

init() {
      const renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      const z = document.getElementById("container");
      z.appendChild(renderer.domElement);
      // 场景
      const scene = new THREE.Scene();
      // 相机
      const camera = new THREE.PerspectiveCamera(
        90,
        window.innerWidth / window.innerHeight,
        0.1,
        100
      );
      camera.position.set(-0.3, 0, 0);
      // 轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener("change", render);
      controls.minDistance = 1;
       controls.maxDistance = 2;
      controls.enablePan = false; 
      
      function addImg(url, scene, n = 1) {
        const texture = THREE.ImageUtils.loadTexture(url);
        const material = new THREE.MeshBasicMaterial({ map: texture });
        // const geometry = new THREE.SphereGeometry(1, 10, 10);
        const geometry = new THREE.SphereGeometry(50, 256, 256);
        const mesh = new THREE.Mesh(geometry, material);
        material.side = THREE.DoubleSide
        scene.add(mesh);
        return mesh;
      }
      const mesh = addImg(
        "BASE 64格式", // 普通格式 可能会报这个错误 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element 可以转换base 64 解决 
        scene,
        1
      );
      scene.add(mesh);
      // 坐标轴辅助线
      scene.add(new THREE.AxisHelper(1000));
      controls.update(); // 控制器需要
      controls.target.copy(mesh.position);
      function render() {
        renderer.render(scene, camera);
      }
      function r() {
        render();
        requestAnimationFrame(r);
      }
      r();
    },

最后在挂载dom后初始化

 mounted() {
    this.init();
  }