vue 项目使用three.js 实现3D看房效果

0.前言

该教程能帮助直接写出vue项目的3D看房效果!!!
先上效果图
在这里插入图片描述

1.安装依赖

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

2.vue代码

这里文件名为three.vue
代码非原创,出处 vue3+threejs实现全景看房
(异步加载 BOLLROOM 部件为对原代码的修改)

<template>
    <div class="container" ref="containerRef"></div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

//导入hdr图像加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";//rebe加载器

//加载hdr组件
import BOLLROOM from '../assets/house03.hdr'

// import BOLLROOM from '../assets/redhouse.hdr'

// 初始化场景
const scene = new THREE.Scene();

// 初始化 透视 相机  参数1 视角  屏幕宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
// 设置相机位置
camera.position.z = 0.1;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const containerRef = ref(null);
const render = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
};

// 添加球
const geometry = new THREE.SphereGeometry(5, 32, 32);
const loader = new RGBELoader();

//异步加载 hdr组件
loader.loadAsync(BOLLROOM).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);
});


// 挂载完毕 获取dom
onMounted(() => {
    // 添加控制器
    const contros = new OrbitControls(camera, containerRef.value);
    contros.enableDamping = true;
    containerRef.value.appendChild(renderer.domElement);
    render();
});
</script>
  
<style>
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    background-color: #f0f0f0;
}
</style>

注意这里的hdr 文件必须要放在assets文件夹中,且要通过import模块的形式导入!!

3.vue.config.js配置设置

module.exports = {
  configureWebpack: {
    module: {
    //文件校验规则
      rules: [
        {
        //当检测到读取hdr文件
          test: /\.(fbx|hdr)$/,
          use: [
            {
            //使用该加载器
              loader: 'url-loader',
              options: {
                limit: 8192,
                //设置网页页面类型
                mimeType: 'application/octet-stream'
              }
            }
          ]
        }
      ]
    }
  }
};

4.放置hdr文件

注意hdr 文件要放在assets文件夹中!!

在这里插入图片描述
hdr资源下载地址(外网,可直接访问)
https://polyhaven.com/

点击这里也可以下载好我传的几个室内hdr包

5.后话

昨晚熬夜没搞出来,今天又踩各种坑,泪T T
感谢彬哥的临门一脚!
参考资料:
vue3+threejs实现全景看房
threejs实现3d全景看房
Three.js 关于模型格式不支持的问题

  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
随着虚拟现实技术的不断发展和普及,VR全景看房也成为了当前房地产行业非常流行的一种展示方式。为了更好地展示房屋的真实感和空间感,三维技术逐渐成为了VR全景看房的主流技术。而three.js是一种基于WebGL的JavaScript 3D库,可以轻松地在Web浏览器上开发出各种类型的3D应用。下面就着重介绍基于three.js实现VR全景看房的技术和流程。 一、技术原理 基于three.js实现VR全景看房的原理非常简单。首先利用three.js构建出一个场景,然后在场景中添加全景图片作为背景,再添加相机和控制器,最后将整个场景渲染到浏览器中。用户可以通过PC、手机或VR设备访问该网页,打开全屏浏览,利用鼠标或手持设备进行交互控制,感受仿若身临其境的效果。 二、实现流程 1. 确定场景设计并准备好全景图片,例如通过摄影、3D建模等方式生成全景图像。 2. 创建场景 通过three.js框架创建场景,可以在场景中添加各种3D对象(地面、墙壁、家具、家电等),并根据实际情况进行美化和优化。 3. 添加全景图片 利用全景图像作为背景,创建全景渲染器,将全景图像贴在一个球形网格上,并放置在场景正中央。 4. 添加相机 利用PerspectiveCamera创建一个透视摄像机,并设置视角、位置和朝向等参数,让观察者能够看到场景中的所有物体。 5. 添加控制器 通过OrbitControls、DeviceOrientationControls等控制器对相机位置进行控制,使用户可以自由地沿着不同的方向和角度查看全景图像。 6. 渲染场景 最后将场景渲染到浏览器中,让用户可以通过不同设备进行访问和交互。 三、效果展示 通过基于three.js实现的VR全景看房技术,用户可以直观地了解房屋的结构、装修和风格,不需要亲自到现场看房,也可以感受到房屋的魅力和舒适程度。此外,利用VR设备进行浏览,其效果更加真实。 总之,基于three.js实现VR全景看房技术是当前房地产行业的一种重要展示方式,利用三维技术呈现出真实的房屋环境,既增强了客户的购房体验,也提高了销售方的营销效果
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值