首先我們先搭建一個項目，我選擇使用vite來進行項目的搭建，執(zhí)行命令如下：

yarn create vite 項目名稱

這樣一個基本的項目就搭建成功了，目錄如下所示

然后，下載一下three.js工具，執(zhí)行如下命令

npm i three

頁面中引入

import * as THREE from "three";

先搭建一個立體圖形，并畫出輔助線，如下所示

?實現(xiàn)代碼如下：

import * as THREE from "three";
import { useEffect} from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


function App() {


  useEffect(() => {
    const camera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.01,
      10
    );
    camera.position.z = 1;

    const scene = new THREE.Scene();


    const geometry = new THREE.BoxGeometry(0.4,0.4,0.4);
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh( geometry, material );

    // 輔助軸畫線
    const ax = new THREE.AxesHelper();
    scene.add(ax);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animation);
    document.body.appendChild(renderer.domElement);

    // animation

    function animation(time) {
      // 可以進行旋轉
      // mesh.rotation.x = time / 2000;
      // mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);
    }

    new OrbitControls(camera, renderer.domElement);

  }, []);

  return <div className="App"></div>;
}

export default App;

接著，給我們的立體圖形中添加照片，實現(xiàn)如下效果

這是從上面看的俯視圖，它可以進行一個旋轉

實現(xiàn)代碼如下：

import * as THREE from "three";
import { useEffect } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import back from '../src/img/back.png'
import bottom from '../src/img/bottom.png'
import front from '../src/img/front.png'
import left from '../src/img/left.png'
import right from '../src/img/right.png'
import top from '../src/img/top.png'

function App() {


  const loadTextrue=(url)=>{
    const loader = new THREE.TextureLoader()
    const texture=loader.load(url)
    const material = new THREE.MeshBasicMaterial( {
       map: texture,
       side:THREE.DoubleSide,
      } );
    return material
  }

  useEffect(() => {
    const camera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.01,
      10
    );
    camera.position.z = 1;

    const scene = new THREE.Scene();


    const arr=[
      loadTextrue(back),
      loadTextrue(front),
      loadTextrue(top),
      loadTextrue(bottom),
      loadTextrue(left),
      loadTextrue(right),
    ]
    const geometry = new THREE.BoxGeometry(4,4,4);


    const mesh = new THREE.Mesh(geometry,arr);
    scene.add(mesh);

    // 輔助軸畫線
    // const ax = new THREE.AxesHelper();
    // scene.add(ax);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animation);
    document.body.appendChild(renderer.domElement);

    // animation

    function animation(time) {
      // 可以進行旋轉
      // mesh.rotation.x = time / 2000;
      // mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);
    }

    new OrbitControls(camera, renderer.domElement);

  }, []);

  return <div className="App"></div>;
}

export default App;

需要注意的是：圖片一定要按照順序來，六方體順序如下：前后，上下，左右

圖片需要在項目中下載，如果有需要的朋友可以私聊發(fā)代碼

由于最近私信的小伙伴比較多，再加上最近比較忙，所以就把項目上傳到了百度網盤，有需要的可以下載解壓后查看代碼

鏈接：https://pan.baidu.com/s/1-ykuudmi_kyW-xPYK8iCiw?pwd=flzx?
提取碼：flzx文章來源地址http://www.zghlxwxcb.cn/news/detail-527314.html

到了這里，關于three.js實現(xiàn)3D室內全景看房的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！