从前端框架到GIS开发系列课程(32)Three.js项目规划以及核心对象介绍

原创已于 2025-08-20 09:38:07 修改 · 533 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #three.js #三维GIS开发

于 2025-08-20 09:36:35 首次发布

接下来, 我们学习Three.js项目规划;前期内容回顾👇👇👇

2025JavaScript 3D库Three.JS零基础介绍&入门系列教程-CSDN博客文章浏览阅读1.4k次，点赞25次，收藏25次。Three.js是一个功能强大的JavaScript 3D库，提供了丰富的3D对象、、光照和相机，使得3D图形的创建变得简单直观。可帮助GIS开发者在网页上创建交互式的3D图形和动画效果，能高效呈现复杂地形模型、建筑可视化等，让地理信息从二维跃升至三维，直观立体。其性能优化出色，交互体验流畅，对于想学习GIS开发的同学来说，使用 Three.js 可以帮助他们实现很多功能。本期开始我们将学习three.js的入门系列教程，并且在课程结束之后会带着大家手搓一下three.js三维汽车车展小项目。https://blog.csdn.net/yaogis888/article/details/150484976?spm=1001.2014.3001.5502 从前端框架到GIS开发系列课程（29）Three.JS搭建开发环境&起步案例；-CSDN博客文章浏览阅读729次，点赞20次，收藏13次。当相机从不同的角度观察同一个物体会得到不同的图像, 然后把这些图像使用一定的技术拼接组合, 我们的大脑会根据生活在三维世界的经验自行脑补出三维空间。在现实生活中, 得益于拍照技术, 从不同的角度拍射(观察)同一个物体, 然后通过一些光照阴影我们的大脑可以自行脑补出三维的画图。由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同。上述我们会看到明显的锯齿, 显示也不够清晰, 这里我们通过设置两个参数, 改善渲染效果。https://blog.csdn.net/yaogis888/article/details/150486020?spm=1001.2014.3001.5502 从前端框架到GIS开发系列课程（30）Three.js坐标系、轨道控制器以及自适应画布的引入-CSDN博客文章浏览阅读251次，点赞10次，收藏19次。2025JavaScript 3D库Three.JS零基础介绍&入门系列教程-CSDN博客Three.js是一个功能强大的JavaScript 3D库，提供了丰富的3D对象、、光照和相机，使得3D图形的创建变得简单直观。可帮助GIS开发者在网页上创建交互式的3D图形和动画效果，能高效呈现复杂地形模型、建筑可视化等，让地理信息从二维跃升至三维，直观立体。其性能优化出色，交互体验流畅，对于想学习GIS开发的同学来说，使用 Three.js 可以帮助他们实现很多功能。https://blog.csdn.net/yaogis888/article/details/150514063?spm=1001.2014.3001.5502 从前端框架到GIS开发系列课程(31)Three.js动画的基础，移动/缩放/旋转-CSDN博客文章浏览阅读772次，点赞18次，收藏13次。2025JavaScript 3D库Three.JS零基础介绍&入门系列教程-CSDN博客Three.js是一个功能强大的JavaScript 3D库，提供了丰富的3D对象、、光照和相机，使得3D图形的创建变得简单直观。可帮助GIS开发者在网页上创建交互式的3D图形和动画效果，能高效呈现复杂地形模型、建筑可视化等，让地理信息从二维跃升至三维，直观立体。其性能优化出色，交互体验流畅，对于想学习GIS开发的同学来说，使用 Three.js 可以帮助他们实现很多功能。https://blog.csdn.net/yaogis888/article/details/150520156?spm=1001.2014.3001.5502

three.js项目规划

一个three.js的项目由这么几个部分组成

这里我们可以对项目目录结构进行拆分, 分为：

scene: 场景
mesh: 网格(物体)
light: 灯光
camera: 相机
renderer: 渲染器
utils: 工具

1.封装场景

创建src/scene/index.js

import * as THREE from 'three'
const scene = new THREE.Scene()
export default scene

2.封装相机

创建src/camera/index.js

import * as THREE from 'three'
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000)
camera.position.set(0, 0, 10)
export default camera

3.封装渲染器

创建src/renderer/index.js

import * as THREE from 'three'
function isFunction(val) {  return typeof val === 'function'}
class Renderer extends THREE.WebGLRenderer {  constructor(scene, camera) {    super({ antialias: true })    this.scene = scene    this.camera = camera    this.init()  }  init() {    this.setPixelRatio(window.devicePixelRatio)    this.setSize(window.innerWidth, window.innerHeight)    document.body.appendChild(this.domElement)
    // 默认渲染    this.render(this.scene, this.camera)  }  animation(cb) {    if (!isFunction(cb)) {      console.error('param must be a function')      return    }
    this.setAnimationLoop(cb)  }}
export default Renderer

4.封装物体

创建src/mesh/index.js

import * as THREE from 'three'
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
export default cube

5.封装工具集

创建src/untils/index.js

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
export default class Utils {  constructor(options = {}) {    this.scene = options.scene    this.camera = options.camera    this.renderer = options.renderer
    if (!this.scene || !this.camera || !this.renderer) {      console.error('scene, camera, renderer can not be null')      return    }    this.init(options)  }  init(options) {    this.initOrbitControls(options.orbitControl)    this.initAxesHelper(options.axesHelper)    this.initGridHelper(options.gridHelper)  }  // 默认开启轨道控制器， 只有当传入的orbitControl===false时关闭  initOrbitControls(value) {    if (value === false) {      console.log('orbitControl disabled')      return    }
    new OrbitControls(this.camera, this.renderer.domElement)  }  // 默认开启坐标轴辅助工具， 只有当传入的axesHelper===false时关闭  initAxesHelper(value) {    if (value === false) {      console.log('axesHelper disabled')      return    }
    const init = {      size: 10,    }    const params = Object.assign(init, value)
    const axesHelper = new THREE.AxesHelper(params.size)    this.scene.add(axesHelper)  }  // 默认开启网格辅助工具， 只有当传入的gridHelper===false时关闭  initGridHelper(value) {    if (value === false) {      console.log('gridHelper disabled')      return    }    const init = {      size: 20,      divisions: 20,      color1: 0xffffff,      color2: 0xffffff    }    const params = Object.assign(init, value)
    const gridHelper = new THREE.GridHelper(...Object.values(params))    gridHelper.material.transparent = true    gridHelper.material.opacity = 0.5
    this.scene.add(gridHelper)  }}

6.导入使用

在main.js中导入

import scene from './scene'import camera from './camera'import mesh from './mesh'import Renderer from './renderer'import Utils from './utils'
scene.add(mesh)
const renderer = new Renderer(scene, camera)
renderer.animation(() => {  renderer.render(scene, camera)})
new Utils({  scene,  camera,  renderer,})

Three.js核心对象物体

如何在虚拟的3D场景中模拟真实世界, 核心是物体

在three.js中, 物体使用Mesh(网格)来描述

网格模型

在计算机图形学中, 几何体都是由三角形拼接而成, 由三角形组成的模型叫网格模型

从上面可以看到, 三角形越多, 模拟的模型越接近真实情况。

ChatGPT的解释

图形学中使用三角形作为基本的构造单元来生成复杂的物体，这是因为使用三角形可以带来多方面的好处。下面是一些主要的好处：

易于处理：三角形是一种简单的几何图形，易于计算和处理。它们有三个顶点，每个顶点有三个坐标，这使它们易于表示和存储。
适合多边形的形状：复杂的多边形形状可以通过简单的三角形组合来近似表示。这种近似往往能够满足需要，同时也可以提高计算效率。
易于进行光照和渲染：计算机图形学中的光照和渲染算法通常是针对三角形的。这是因为三角形是最简单的几何形状之一，它们的光照和渲染可以在多个工具和库中找到。
具有一致性：使用三角形作为构造单元可以带来一致性的好处。因为三角形是通用的基本几何形状，它们可以被用于不同的场景和应用中，从简单的2D图形到复杂的3D物体，这样可以使代码更加通用。
确保物体的平面：在三维空间中，三角形是唯一可以确保与另一个三角形在同一平面上的几何形状。这是因为只要三个点不共线，就可以构建出确定的平面，这保障了物体的正确表现。

综上，使用三角形作为构造单元有多种好处，使得其成为图形学中最受欢迎的几何形状之一。

Mesh主要由这些部分组成