Three.js+vue3.js 3D全景看房

1、按照依赖

以来主要使用的

npm i three              //安装three.js依赖
npm install file-loader  //安装文件装载器
npm install url-loader   //安装url装载器

2、原理分析

        主要的原理是将模型放入一个透明的圆球中，然后移动鼠标，可以看到不同的场景对应的模型场景。

其中因为是.hdr文件格式，主要使用的是RGBELoader加载器。不同的模型文件使用不同的加载器。

3、代码案例

以下的代码案例在安装之后，直接可以使用，具体的开发步骤还是前面加载和基础步骤一样：

第一步：实例化场景、相机。

第二步：实例化模型，并将模型加载到场景。

第三步：场景渲染，并将场景加载到对样的div子元素中。

4、参考文档

喝水不忘挖井人。以下是自己查看的项目的文档，可以做借鉴，其中的.hdr文件就是从文档提供的链接地址下载的。

vue 项目使用three.js 实现3D看房效果_three 租房 怎么做 前端-CSDN博客

5、代码案例

<template>
  <main ref="containerRef" class="container">
      
  </main>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";//rebe加载器
const containerRef = ref()

//设置场景宽度，高度
const width = window.innerWidth, height = window.innerHeight;
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(
  75,window.innerWidth/window.innerHeight,0.1,1000
)
//设置相机的位置
camera.position.set(0, 0, 1)
let renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

//添加全景展示
const geometry = new THREE.SphereGeometry(5,32,32)
const loader = new RGBELoader()

loader.loadAsync("src/assets/file/house/house02.hdr").then((texture)=>{
  const material = new THREE.MeshBasicMaterial({map:texture})
  const sphere = new THREE.Mesh(geometry,material)
  sphere.geometry.scale(1,1,-1)
  scene.add(sphere)
})

//设置监听事件
const controls = new OrbitControls(camera,renderer.domElement)

//绘制画布
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera)
}
onMounted(()=>{
  
  //增加监听事件
  controls.addEventListener('change',function(){
    renderer.render(scene,camera)
  })
  //将渲染元素加载到画面
  containerRef.value.appendChild(renderer.domElement);
  render()

})


</script>


<style scoped lang="less">
.container{
  cursor: pointer;
  width:500px;
  height:500px;
}
</style>