从零开始写THREEJS DEMO（一）3D看房<一>

THREE.js 3D看房案例 (一)

基础知识准备

我们知道，threejs是封装了基础的webgl库，threejs三要素：场景、相机（正交相机、透视相机）、渲染器，物体三要素：几何体（Geometry）、材质（Material）、网格（Mesh），还可以结合dom事件完成一些交互操作、还能导入模型播放模型动作、配合物理引擎做物理效果等，要做3D看房效果，在THREE.js中有两种主流的实现效果：全景图片贴图（就是一个球体物体加全景图贴图）、skyBox天空盒（就是用一个正方体，六个面贴上单个方向的全景图），准备好物体后，使用几何体的Geometry.box.geometry.scale()方法缩放物体，把相机包围，相当于将视觉移动到物体内部，就完成预览效果:)

这里有一个转换全景图的工具：HDRI to CubeMap

代码仓库：GitHub - Exchar/threejs-demo: 一个threejs demo集合

基础类准备

我们先来实现一个基础的效果，使用场景、相机、渲染器，结合轨道控制器（OrbitControls）

从0开始：使用vite，不使用MVVM框架，使用原生写法，使用typescript

项目搭建

先准备一个文件夹

进入文件夹后先初始化一个package.json

bash 复制代码

pnpm init

安装vite

bash 复制代码

pnpm add vite -D

然后在package.json的scripts节点中写一个"dev": "vite"

最终基础文件结构是这样的

vite.config.ts

typescript 复制代码

import {defineConfig} from 'vite'
export default defineConfig({
    build:{
        target: 'esnext'
    },
    server:{
        port: 9800
    },
    root: './'
})

index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script type="module" src="./src/pages/home/index.js"></script>
</body>
</html>

在utils/index.ts中编写BaseRender类

typescript 复制代码

import * as THREE from 'three'
interface Option{
    width?:number,
    height?:number,
    antialias?:boolean
}
export class BaseRender{
    canvasEl:HTMLCanvasElement|null = null
    renderer: THREE.WebGLRenderer
    scene: THREE.Scene
    camera: THREE.PerspectiveCamera

    constructor(el:string | HTMLCanvasElement|undefined,options:Option){
        this.canvasEl = el ? this.getQueryElement(el): null;

        // 创建threejs场景
        this.scene = new THREE.Scene()
        this.scene.background = new THREE.Color(0xbfbfbf);

        // 创建threejs相机
        // 参数值为 视野角度,长宽比,近截面,远截面
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.z = 0

        // 创建webgl渲染器
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvasEl || undefined,
            antialias: options.antialias || false
        });
        if(!this.canvasEl){
            document.body.appendChild(this.renderer.domElement);
        }
        // 设置canvasEl
        this.canvasEl = this.canvasEl || this.renderer.domElement;
        // 设置渲染尺寸
        this.renderer.setSize(options.width || window.innerWidth, options.height ||window.innerHeight);
        this.renderer.render(this.scene,this.camera)

        this.startResizeWatcher();

    }
    startRender(){
        // console.log(this.renderer)
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(()=>this.startRender());
    }
    getQueryElement(el:string | HTMLCanvasElement):HTMLCanvasElement|null{
        return typeof el==='string' ? document.querySelector(el) : el
    }
    startResizeWatcher(){
        window.addEventListener('resize',()=>{
            this.renderer.setSize(window.innerWidth,window.innerHeight)
        })
    }
}

简单解释一下，为了方便后面调用，将场景scene、相机camera、渲染器renderer都放到类的属性里，为了拿到最终渲染的canvasElement，在调用创建渲染器后又获取渲染器实例的domElement重新赋值，startRender是一个每隔一段时间都在调用渲染器实例的render函数的递归函数，为了使其运行更加流畅，使用requestAnimationFrame，相比定时器它更加智能，能根据当前电脑的负载和性能确定什么时候执行渲染，默认不自动执行，子类继承后手动调用startRender函数，startResizeWater是一个监听window窗口尺寸然后实时给画布canvas尺寸设置的函数

然后在文件src/pages/home/index.ts中继承并实例化一下

typescript 复制代码

import { BaseRender } from "../../utils";
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

class CutstomRender extends BaseRender {
    controls: OrbitControls
    constructor(){
        super(undefined,{});

        // 调用更新函数
        this.startRender()
    }
}


//实例化
new CustomRender()

现在的效果如下

为什么什么都没有？因为没有添加物体、光源、阴影什么的

为了方便观察，添加一个轨道控制器轨道控制器（OrbitControls）和一个网格帮助类GridHelper

这里简单介绍一下轨道控制器和网格帮助类