《Three.JS零基础入门教程》第五篇：项目规划

《Three.JS零基础入门教程》第一篇：搭建开发环境

《Three.JS零基础入门教程》第二篇：起步案例

《Three.JS零基础入门教程》第三篇：开发辅助

《Three.JS零基础入门教程》第四篇：基础变换

后续持续更新

GIS开发资料分享

一个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,
})

下一期进一步详解介绍Threejs中的常用对象, 包括

• 物体
  • 几何
  • 材质
  • 纹理
• 场景
• 相机等