three.js实现3D室内全景看房-Toy模板网

这篇具有很好参考价值的文章主要介绍了three.js实现3D室内全景看房。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先我们先搭建一个项目，我选择使用vite来进行项目的搭建，执行命令如下：

yarn create vite 项目名称

这样一个基本的项目就搭建成功了，目录如下所示

three.js实现3D室内全景看房,前端,vue.js,typescript,前端

然后，下载一下three.js工具，执行如下命令

npm i three

页面中引入

import * as THREE from "three";

先搭建一个立体图形，并画出辅助线，如下所示

three.js实现3D室内全景看房,前端,vue.js,typescript,前端

实现代码如下：

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;

接着，给我们的立体图形中添加照片，实现如下效果

three.js实现3D室内全景看房,前端,vue.js,typescript,前端

这是从上面看的俯视图，它可以进行一个旋转

实现代码如下：

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;

需要注意的是：图片一定要按照顺序来，六方体顺序如下：前后，上下，左右

图片需要在项目中下载，如果有需要的朋友可以私聊发代码

由于最近私信的小伙伴比较多，再加上最近比较忙，所以就把项目上传到了百度网盘，有需要的可以下载解压后查看代码