关于three.js:精读用threejs实现全景图

之前做组内分享，选了 threejs 来学习一下，接下来就把用 threejs 实现的全景图来解读一下。

1. three.js 根底回顾

1.1 three.js 概览

1. 是什么？
Three.js 是一款 webGL 框架，它封装了底层的图形接口，使得可能在无需把握繁冗的图形学常识的状况下，也能用简略的代码实现三维场景的渲染。

2. 外围

• 渲染器: 将场景中的物体进行渲染
• 场景: 场景是所有物体的容器，也对应着咱们创立的三维世界
• 相机: 一种投影形式，将三维的场景显示到二维的屏幕上

1.2 相机

1. 是什么
咱们应用 Three.js 创立的场景是三维的，而通常状况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个形象，它定义了三维空间到二维屏幕的投影形式，用“照相机”这样一个类比，能够使咱们直观地了解这一投影形式。

2. 分类

• 正交投影照相机: 对于在三维空间内平行的线，投影到二维空间中也肯定是平行的
• 透视投影照相机: 有近大远小的成果

1.3 模型

1. 次要有以下几种模型

2. 模型包含什么

• 几何形态
• 材质

1.4 光与影

1. 分类

• 环境光

指场景整体的光照成果。是因为场景内若干光源的屡次反射造成的亮度统一的成果，通常用来为整个场景指定一个根底亮度

• 点光源

点光源是不计光源大小，能够看作一个点收回的光源。点光源照到不同物体外表的亮度是线性递加的

• 平行光

对于任意平行的立体，平行光照耀的亮度都是雷同的

• 聚光灯

聚光灯是一种非凡的点光源，它可能朝着一个方向投射光线

• 暗影

明暗是绝对的，暗影的造成也就是因为比四周取得的光照更少。因而，要造成暗影，光源必不可少。

2. 全景图的实现

• 建设球体模型并令照相机位于球体中
• 一直挪动照相机的地位使其察看到球体内的各个角度

2.1 建设根本场景

• 初始化渲染器

const setupRenderer = () => {const renderer = new THREE.WebGLRenderer({antialias: true})
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  return renderer
}

• 初始化相机

// 建设透视投影相机制作出“近大远小”的成果
const setupCamera = () => {
  const aspectRatio = window.innerWidth / window.innerHeight
  const camera = new THREE.PerspectiveCamera(90, aspectRatio, 0.0001, 10000)
  camera.position.set(window.obj.camerax, window.obj.cameray, window.obj.cameraz)

  return camera
}

• 初始化场景 scene 和辅助线

  const scene = new THREE.Scene()
  const axesHelper = new THREE.AxesHelper(1000)
  const cameraHelper = new THREE.CameraHelper(camera)
  const gridHelper = new THREE.GridHelper(1000, 10)

  // 安排场景
  scene.add(axesHelper)
  scene.add(cameraHelper)
  scene.add(gridHelper)

• 建设球体模型

// 采纳加载纹理贴图的形式将一张一般的全景图贴在球体的外表
const sphereGeo = new THREE.SphereGeometry(radius)
const sphereMaterial = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
})
const sphere = new THREE.Mesh(sphereGeo, sphereMaterial)

这样，根本的场景就展示进去了。此时咱们只能看到球中的一个方向。

咱们想要的成果是当滑动鼠标时，能够看到球中不同方向的场景。

2.2 外围：鼠标挪动 - 相机挪动

1. 波及到以下几点：

• 监听鼠标的按下、挪动事件
• 鼠标挪动间隔转化成经纬度
• 经纬度转化成相机的坐标

2. 代码解读

• 监听鼠标事件

// mousedown 事件，记录挪动的终点
window.addEventListener('mousedown', e => {
    startPosX = e.clientX
    startPosY = e.clientY
    startTs = Date.now()
    isMouseDown = true
  })
// mousemove, 记录挪动的起点，并调用 move 函数进行实时计算
window.addEventListener('mousemove', e => {if (!isMouseDown) return
    const posX = e.clientX
    const posY = e.clientY
    const curTs = Date.now()

    // 依据起始和挪动过程中的坐标、挪动的工夫来挪动相机
    let startPos = {x: startPosX, y: startPosY};
    let endPos = {x: posX, y: posY};
    let duration = curTs - startTs;
    
    move(startPos, endPos, duration)

    // 以以后的起点为下一次的终点
    startPosX = posX
    startPosY = posY
    startTs = curTs
})

• move 函数的实现：依据转化进去的相机坐标实时的设置相机的地位

  • 鼠标挪动间隔 -> 经纬度
  • 经纬度 - 坐标

const move = (startPos, endPos, duration) => {if (duration === 0) return

    const {x: sx, y: sy} = startPos
    const {x: ex, y: ey} = endPos
    const vx = (ex - sx) / duration// X 轴方向上的速度
    const vy = (ey - sy) / duration// Y 轴方向上的速度
    // 1. 鼠标挪动间隔 -> 经纬度
    const {longtitude, latitude} = getMovPos({
        startPos,
        endPos: {x: vx * moveBuffTime + ex, y: vy * moveBuffTime + ey},
        curRotate: {longtitude: movObj.longtitude , latitude: movObj.latitude},
    })
   
   // 设置挪动参数
    // 在 update 中设置相机实时的坐标会使挪动过程更细腻
    const gsapOpts = {
      ease: "power4.out",
      duration: 1,
      onUpdate: () => {
           // 2. 经纬度 -> 相机的坐标
        const {latitude: newLati, posObj: newPos} = setCameraPos({
          longtitude: movObj.longtitude,
          latitude: movObj.latitude
        });

        movObj.latitude = newLati;
        movObj.longtitude = longtitude;

        // 3. 设置摄像机坐标
        posObj.camerax = newPos.x;
        posObj.cameray = newPos.y;
        posObj.cameraz = newPos.z;
      },
      
    };
    gsap.to(movObj, gsapOpts);
  }

在这里，用了 gsap 的动画来实现挪动的动画，并且在动画更新过程中实时的计算。

之前在批改的过程中，有采纳过如下写法，即对于相机坐标的计算、动画挪动是程序执行的，没有在 update 函数中实时的进行计算。这样会导致理论看到的成果是：当咱们只横向挪动鼠标时（扭转精读），场景也会在竖直方向上有变动（纬度也变）

const {latitude: newLatitude, posObj: newPos} = setCameraPos({longtitude: movObj.longtitude, latitude: movObj.latitude})
// 3. 挪动相机
gsap.to(posObj, {
    ease: 'power4.out',
    duration: 1,
    camerax: newPos.x,
    cameray: newPos.y,
    cameraz: newPos.z,
})
movObj.longtitude = longtitude
movObj.latitude = latitude

• 鼠标挪动间隔 -> 经纬度

我了解的 0.138 和 0.12 这两个比例值都能够变动，齐全取决于你想让鼠标挪动多少代表经度和维度的一圈而已。

这样每次在以后经度 / 纬度的根底上，再加上鼠标挪动间隔对应的一段增量 (如：(sx – ex) * 0.138) 就失去了新的经 / 纬度

const {x: sx, y: sy} = startPos
  const {x: ex, y: ey} = endPos
  const {longtitude: curLongtitude, latitude: curLatitude} = curRotate

  const longtitude = (sx - ex) * 0.138 + curLongtitude
  const latitude = (sy - ey) * 0.12 + curLatitude
  return {
    longtitude,
    latitude,
}

• 经纬度 -> 坐标

  • 角度 -> 弧度：三角函数计算用到的是弧度
  • 波及到了数学上的计算：已知球体的半径，计算空间中的某一点的坐标

function setCameraPos ({latitude,longtitude}) {const newLatitude = Math.max(-85, Math.min(85, latitude))
    // 将经纬度转化为弧度
    const phi = THREE.MathUtils.degToRad(newLatitude)
    const theta = THREE.MathUtils.degToRad(longtitude)
    const posObj = {
        x: 0,
        y: 0,
        z: 0,
    }
    // 要害公式计算
    const r = 100;
    posObj.y = r * Math.sin(phi);
    const ob = r * Math.cos(phi);
    posObj.z = ob * Math.cos(theta);
    posObj.x = ob * Math.sin(theta);
    
    return {
        latitude: newLatitude,
        posObj,
    }
}

对于空间中某一点坐标的计算，咱们能够看下以下这张图

对于空间中的某一点 D，已知 OD 是半径，∠AOB 就是经度，∠DOB 就是纬度

那么 D 在 y 轴上的间隔就是 OE=DB=OD * sin(∠DOB)
OB = OD * cos(∠DOB)
D 在 x 轴上的间隔就是 OC=AB=OB * sin(∠AOB)
D 在 Z 轴上的间隔就是 Oa=OB *cos(∠AOB)

所以依据以上公式就能将经纬度转化为坐标，即上述代码中的计算。

至此，已根本实现了全景图的成果。

点击获取残缺代码