创建场景

let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
let renderer = new THREE.WebGLRenderer()
let controls = new OrbitControls(camera, renderer.domElement)
// 坐标轴辅助对象
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

加载模型

    // 加载模型
    gltfLoader.load("./model/device-all.gltf", (gltf) => {
      scene.add(gltf.scene)
      // 设置模型缩放比例
      gltf.scene.scale.set(0.3, 0.3, 0.3)
      // 获取模型长宽高
      const box3 = new THREE.Box3()
      box3.expandByObject(gltf.scene)
      const v3 = new THREE.Vector3()
      box3.getSize(v3)
      // 设置模型居中
      const center = new THREE.Vector3();
      box3.getCenter(center)
      gltf.scene.position.sub(center)
    })

标注尺寸

标注两点之间尺寸方法有很多，比如CSS2DRenderer、CSS3DRenderer渲染器渲染的HTML元素标签、精灵模型Sprite+Canvas画布贴图、借助FontLoader类实现的3D Mesh文字，本文采用最后一种方法。

      // 线段
      const lineMat = new THREE.LineBasicMaterial({color: 0xff0000})
      const points1 = []
      points1.push(new THREE.Vector3(-v3.x/2, -v3.y/2, v3.z/2))
      points1.push(new THREE.Vector3(v3.x/2, -v3.y/2, v3.z/2))
      const geometry1 = new THREE.BufferGeometry().setFromPoints(points1)
      const line = new THREE.Line(geometry1, lineMat)
      scene.add(line)
      
      // 顶点
      const vertexMat = new THREE.MeshBasicMaterial({color: 0xff0000})
      const marker1 = new THREE.Mesh(new THREE.SphereGeometry(0.03, 10, 20), vertexMat) 
      const marker2 = marker1.clone()
      marker1.position.set(-v3.x/2, -v3.y/2, v3.z/2)
      marker2.position.set(v3.x/2, -v3.y/2, v3.z/2)
      scene.add(marker1, marker2)
      
      // 文本
      const fontLoader = new FontLoader()
      fontLoader.load(
        'font/helvetiker_regular.typeface.json', function (font) {
          const measureText = new TextGeometry(`{{v3.x} m`, {
            font: font,
            size: 0.15,
            height: 0.01
        });

        const measureMat = new THREE.MeshBasicMaterial({color: 0xff0000})
        measureCube = new THREE.Mesh(measureText, measureMat)

        line.add(measureCube)
        // 文本居中
        const textBox = new THREE.Box3()
        textBox.expandByObject(measureCube)
        const textV3 = new THREE.Vector3()
        textBox.getSize(textV3)
        measureCube.position.set(-textV3.x/2, -v3.y/2, v3.z/2)
      })