three-入门学习-3D房屋全景实现

title: three-入门学习-3D房屋全景实现
date: 2023-04-06 16:14:00
categories: 入门学习
tags: Three

three-3D 房屋全景实现

1. 安装 three.js

根据之前的粗略学习，突发想做个全景图网上学习一波

3D 效果是前端绕不过的发展趋势，未来会有更多的 3D 场景的需要。

<template>
  <div>
    3D

    <div class="three-box-one">
      <div id="three" />
    </div>
  </div>
</template>
<script setup lang="ts">
import * as THREE from 'three';
import { reactive, onMounted } from 'vue';
import house from './assets/panorama-house.webp';
let scene: THREE.Scene, mesh;
interface DataType {
  id: HTMLElement | any;
  domW: Number | any;
  domH: Number | any;
  camera: THREE.PerspectiveCamera | any;
  renderer: THREE.WebGLRenderer | any;
  mesh: THREE.Mesh | any;
  material: THREE.MeshBasicMaterial;
  // controls?: OrbitControls | any;
  onMouseDownMouseX: number;
  onMouseDownMouseY: number;
  lon: number;
  lat: number;
  onMouseDownLon: number;
  onMouseDownLat: number;
  phi: number;
  theta: number;
  isUserInteracting: Boolean;
}

const dataType: DataType = {
  id: null,
  domW: 0,
  domH: 0,
  camera: THREE.PerspectiveCamera,
  renderer: THREE.WebGLRenderer,
  mesh: THREE.Mesh,
  material: new THREE.MeshBasicMaterial(),
  // controls: OrbitControls,
  onMouseDownMouseX: 0,
  onMouseDownMouseY: 0,
  lon: 0,
  lat: 0,
  onMouseDownLon: 0,
  onMouseDownLat: 0,
  phi: 0,
  theta: 0,
  isUserInteracting: false,
};
const data = reactive(dataType);
onMounted(() => {
  data.id = document.getElementById('three');
  data.domW = window.innerWidth;
  data.domH = window.innerHeight;

  init();
});
const init = () => {
  // 构建器
  scene = new THREE.Scene();
  // 创建近大远小（透视投影）相机
  data.camera = new THREE.PerspectiveCamera(
    75,
    data.domW / data.domH,
    0.01,
    1100
  );
  // 返回一个能够表示当前摄像机所正视(拍摄)的世界空间方向的Vector3对象
  data.camera.target = new THREE.Vector3(0, 0, 0);
  // data.camera.position.z = 5;
  // 创建渲染函数
  data.renderer = new THREE.WebGLRenderer({
    antialias: true, // 模型抗锯齿
    alpha: true, // 开启背景透明
  });
  data.renderer.setClearColor(new THREE.Color(0x000000));
  data.renderer.setPixelRatio(window.devicePixelRatio);
  // 设置渲染场景大小
  data.renderer.setSize(data.domW, data.domH);
  // 将场景添加到div标签
  data.id.appendChild(data.renderer.domElement);
  // 添加灯光
  addLight();
  // 添加场景辅助线
  axisHelper();
  // 添加球体设置材质
  initSphereGeometry();
  // 添加事件监听器，配合鼠标做不同的位置变换
  addEventListenFn();
  // 刷帧渲染动画
  animate();
  // 响应屏幕改变大小函数
  onWindowResize();
};

const addLight = () => {
  // 设置环境光 环境光会均匀的照亮场景中的所有物体。
  const ambientLight = new THREE.AmbientLight('#ffffff');
  scene.add(ambientLight);
  // 设置平行光
  const light = new THREE.DirectionalLight('#ffffff');
  scene.add(light);
  // 设置点光源
  const pointLight = new THREE.PointLight('#ffffff', 0.1, 1000);
  pointLight.position.set(300, 300, 300);
  scene.add(pointLight);
};

const axisHelper = () => {
  const axes: THREE.AxesHelper = new THREE.AxesHelper(800);
  scene.add(axes);
};
const initSphereGeometry = () => {
  // 创建半径500的球体 （球缓冲几何体）
  const geometry = new THREE.SphereGeometry(500, 32, 16);
  geometry.scale(-1, 1, 1);
  // 创建材质获取材质图片鱼眼图
  data.material = new THREE.MeshBasicMaterial({
    // 加载墙壁图纸 自己网上找一个全景图片就行了
    map: new THREE.TextureLoader().load(house),
  });
  mesh = new THREE.Mesh(geometry, data.material);
  // 将球体添加到场景
  scene.add(mesh);
};
const addEventListenFn = () => {
  const _this: any = data;
  // 鼠标按下获取鼠标xy坐标转换成球体经纬度
  document.addEventListener('mousedown', onPointerStart, false);
  // 鼠标移动计算变化后的球体经纬度
  document.addEventListener('mousemove', onPointerMove, false);
  // 鼠标抬起停止跟随
  document.addEventListener('mouseup', onPointerUp, false);
  // 鼠标滚轮放大缩小摄像机目标距离
  document.addEventListener('wheel', onDocumentMouseWheel, false);
  // 移动端手指移上获取鼠标xy坐标转换成球体经纬度
  document.addEventListener('touchstart', onPointerStart, false);
  // 移动端手指移动计算变化后的球体经纬度
  document.addEventListener('touchmove', onPointerMove, false);
  // 移动端手指抬起停止跟随
  document.addEventListener('touchend', onPointerUp, false);
  // 拖拽
  document.addEventListener(
    'dragover',
    (e: any) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
    },
    false
  );
  // 拓拽停止设置body 半透明
  document.addEventListener(
    'dragenter',
    () => {
      document.body.style.opacity = '0.5';
    },
    false
  );
  // 拖拽离开回归透明度
  document.addEventListener(
    'dragleave',
    () => {
      document.body.style.opacity = '1';
    },
    false
  );
  document.addEventListener(
    'drop',
    (e: any) => {
      e.preventDefault();
      // 读取图片为二进制码
      const reader = new FileReader();
      reader.addEventListener(
        'load',
        (es: any) => {
          // 更新材质
          _this.material.map.image.src = es.target.result;
          _this.material.needsUpdate = true;
        },
        false
      );
      reader.readAsDataURL(e.dataTransfer.files[0]);
      document.body.style.opacity = '1';
    },
    false
  );
};

const onPointerStart = (e) => {
  data.isUserInteracting = true;
  // 获取鼠标x y 坐标
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  data.onMouseDownMouseX = clientX;
  data.onMouseDownMouseY = clientY;
  // 设置经纬度
  data.onMouseDownLon = data.lon;
  data.onMouseDownLat = data.lat;
};
const onPointerMove = (e) => {
  if (data.isUserInteracting) {
    const clientX = e.clientX || e.touches[0].clientX;
    const clientY = e.clientY || e.touches[0].clientY;
    data.lon = (data.onMouseDownMouseX - clientX) * 0.1 + data.onMouseDownLon;
    data.lat = (clientY - data.onMouseDownMouseY) * 0.1 + data.onMouseDownLat;
  }
};
const onPointerUp = () => {
  data.isUserInteracting = false;
};
const onDocumentMouseWheel = (e) => {
  const fov = data.camera.fov + e.deltaY * 0.05;
  data.camera.fov = THREE.MathUtils.clamp(fov, 10, 75);
  data.camera.updateProjectionMatrix();
};
const animate = () => {
  window.requestAnimationFrame(animate);
  // 更新相机 旋转场景空间
  updateFn();
};
const updateFn = () => {
  if (!data.isUserInteracting) {
    // 经度每帧更新0.1 场景自动旋转起来
    data.lon += 0.1;
  }
  data.lat = Math.max(-85, Math.min(85, data.lat));
  data.phi = THREE.MathUtils.degToRad(90 - data.lat);
  data.theta = THREE.MathUtils.degToRad(data.lon);
  // 更新相机 目标 x y z 位置
  data.camera.target.x = 500 * Math.sin(data.phi) * Math.cos(data.theta);
  data.camera.target.y = 500 * Math.cos(data.phi);
  data.camera.target.z = 500 * Math.sin(data.phi) * Math.sin(data.theta);
  // 相机拍摄目标（始终拍摄这里）
  data.camera.lookAt(data.camera.target);
  data.renderer.render(scene, data.camera);
};
const onWindowResize = () => {
  window.onresize = () => {
    data.domH = data.id.offsetHeight;
    data.domW = data.id.offsetWidth;
    data.camera.aspect = data.domW / data.domH;
    data.camera.updateProjectionMatrix();
    data.renderer.setSize(data.domW, data.domH);
  };
};
</script>
<style scoped></style>