Threejs——360°jpg全景环绕

Three——360°图片全景环绕

可以去这个网址找一张作为全景的图片HDRS

三个步骤：

1. 创建一个圆
2. 让相机视角在圆的内部
3. 将圆贴上贴图

/*
 * @Author: SouthernWind 
 * @Date: 2023-06-14 16:38:59 
 * @Last Modified by: Mr.Jia
 * @Last Modified time: 2023-06-28 15:29:07
 */

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import * as THREE from "three";
// 轨道
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { ref, reactive, onMounted } from "vue";
// 三个必备的参数
let scene, camera, renderer, controls;

onMounted(() => {
  let container = document.querySelector(".container");
  const { clientWidth, clientHeight } = container;
  console.log(clientHeight);
  // 首先需要获取场景，这里公共方法放在init函数中
  const init = () => {
    scene = new THREE.Scene();
    // 给相机设置一个背景
    scene.background = new THREE.Color(0xaaaaaa);
    camera = new THREE.PerspectiveCamera(
      90,
      clientWidth / clientHeight,
      1,
      3000
    );
    camera.position.set(200, 200, 200);
    camera.lookAt(0, 0, 0);

    // 渲染器
    renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    // 渲染多大的地方
    renderer.setSize(clientWidth, clientHeight);
    container.appendChild(renderer.domElement);
    addBox();
    console.log("查看当前屏幕设备像素比", window.devicePixelRatio);
  };
  init();
  function addBox() {
    const geometry = new THREE.SphereGeometry(2000, 500, 500);
    geometry.scale(-1, 1, 1);
    const texture = new THREE.TextureLoader().load(
      new URL(`../assets/img/7/hj1.jpg`, import.meta.url).href
    );
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  }

  // 相机控件
  const control = () => {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener("change", function () {});
  };
  control();

  // 光源
  const linght = () => {

  };
  linght();
  // 渲染循环
  const render = () => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  };
  render();
  window.addEventListener("resize", () => {
    // 更新摄像头
    // camera.aspect = window.innerWidth / window.innerHeight;
    // 相机参数更新
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
  /* background: #ff5810; */
}
.btn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
</style>

核心代码：

    const geometry = new THREE.SphereGeometry(2000, 500, 500);
    geometry.scale(-1, 1, 1);
    const texture = new THREE.TextureLoader().load(
      new URL(`../assets/img/7/hj1.jpg`, import.meta.url).href
    );
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

geometry.scale(-1, 1, 1);这里的-1其实就是取反，看到内部的效果。
实际效果如下：

还有的方法可以通过正方体拼成六面形成一个360度全景效果

xyz代表的就是坐标位置
可以借助这个工具将一张图拆分成六面matheowis

选择拆分的格式

 var materials = [
        loadTexture( 'images/skybox/px.jpg' ), // right
        loadTexture( 'images/skybox/nx.jpg' ), // left
 
        /* pano生成的顶部图, 底部图, 在ps中先将py逆时针处理90度 */
        loadTexture( 'images/skybox/py.jpg' ), // top
 
        /* pano生成的顶部图, 底部图, 在ps中先将ny顺时针处理90度 */
        loadTexture( 'images/skybox/ny.jpg' ), // bottom
 
        loadTexture( 'images/skybox/pz.jpg' ), // back
        loadTexture( 'images/skybox/nz.jpg' )  // front
 
    ];
    mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );
    mesh.scale.x = - 1;
    scene.add( mesh );