Three.js 开发编写流程（仅限有一定的基础）

第一步：

创建一个vue2 或者 vue3 项目

第二步：

新建一个 .vue文件 

<template>
    <div class="container" ref="container">
        3D看房
    </div>
</template>

<script  setup>
import * as THREE from "three"
import { } from "vue"

</script>
 
<style lang = "scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    width: 100vw;
    background-color: #f0f0f0;

}
</style>

第三步：

在你创建的vue文件内部引入相关的three.js的库

// 引入THREE.js 库 
import * as THREE from "three"
// 引入 场景控制器，方便我们转换场景，旋转视角
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 引入加载 gltf 格式的模型加载器 
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 引入加载obj格式的模型加载器 
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"
// 引入 加载 mtl 格式的材质文件 
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader"
// 引入加载 hdr格式的图片的加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"
// 引入解压器，当模型被压缩时，需要使用DRACOLoader进行解压
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
// 如果又需要用到镜面反射的，引入镜面反射的平面
import { Reflector } from "three/examples/jsm/objects/Reflector"
// 引入加载基础纹理的加载器
import { TextureLoader } from "three/src/loaders/TextureLoader"

// 以上的是基本的加载器，有些可能用不到，但是一并先引入，后续可以根据情况删除

第四步：创建场景，创建相机，创建渲染器，并将渲染器添加到dom元素盒子下，然后创建渲染函数将场景进行渲染，窗口适应函数，场景控制器

// 初始化场景
const container = ref(null)
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//更新一下相机的投影矩阵，当我们设置了相机的相关配置，比如宽高比，位置等之后，我们需要更新一下相机的投影矩阵
camera.updateProjectionMatrix();
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight)

onMounted(() => {
    // 将渲染的canvas添加到容器中
    container.value.appendChild(renderer.domElement)
    // 监听窗口的resize事件，实现窗口大小自适应
    window.addEventListener("resize", () => {
        // 更新渲染器的尺寸
        renderer.setSize(container.value.clientWidth, container.value.clientHeight)
        camera.aspect = container.value.clientWidth / container.value.clientHeight
        camera.updateProjectionMatrix()
    })
})

//创建场景控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 控制器创建完毕后需要更新一下
controls.update();




// 创建渲染函数
const render = () => {
    // 渲染场景，相机
    renderer.render(scene, camera)
    // 每次绘制一次都需要更新一下控制器
    controls.update();
    requestAnimationFrame(render)
}
// 调用render函数，实现渲染
render()

如果想要渲染的场景能够遵循物理光照，抗锯齿等等，则在渲染器中添加如下代码

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 开启抗锯齿
    alpha: true, // 设置背景透明
    physicallyCorrectLights: true, // 设置按照物理材质进行渲染

})

至此，three.js开发一个基础的3D场景的准备工作已经完成。剩下的就是往场景内部添加各种物体以及设置 一系列的场景交互，可以看下一篇文章