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

陈宁宁Ninging

已于 2023-07-19 11:04:13 修改

阅读量3k

点赞数 6

文章标签： javascript vue.js 3d

于 2023-07-18 21:35:54 首次发布

本文链接：https://blog.youkuaiyun.com/xiaoxiqo/article/details/131796539

版权

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'
              }
            }
          ]
        }
      ]
    }
  }
};