「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

之前我们讲解过了camera参数，也对相机的应用进行了实战，这次我们通过更加形象的模型展示，来说明相机的up、position、lookAt之间的关系。

我们会使用threejs.org/editor/这个在线编辑器，我们也可以下载源码在本地启动editor服务来使用。

• 相机常用参数:
  • postion：相机位置，默认为（0，0，0）
  • up: 相机朝向，默认（0，1，0）,可以理解为那一根坐标轴向上，快门方向
  • lookAt: 相机焦点方向，默认为Z轴负半轴方向, 大白话就是相机看向哪一个点

editor中导入obj模型

• 我们使用 threejs.org/editor/ 导入一个相机模型来说明它们之间的关系
  • 相机模型1701200748_12359.obj.zip
• 把我们的模型压缩包解压，点击file->import导入资源

选中所有资源进行导入 我们导入之后，模型时黑色的，并且太大了，我们需要添加灯光并且缩放模型为0.1倍

• 选择我们的模型文件，缩放0.1倍

• 添加两个 SpotLight 聚光灯，调整位置照射到模型上

• 这样我们的相机模型就能基本显示出来了

相机的位置

我们拖动相机中心的坐标轴，可以调整相机的位置，这个就相当我们创建的相机的position，目前放在了(0,0,0)的位置上 但是这个时候，我们相机是冲上放，还是冲下方是没有决定的，需要通过快门的方向来决定

• 图1

• 图2

我们先设定up方向为图1方向，也就是(0,1,0) ​

• lookAt方向是焦点的方向，也是我们看向某个点的方向，假定我们看向的是(2,0,0)这个点，这个时候up方向还是没有变
• lookAt也可以理解为camera的旋转角度（rotation），即旋转camera朝向那个位置

总上演示，通过position，up，lookAt就能确定相机在我们三维场景唯一的位置和具体的朝向。 注意：

• up，lookAt的关系，必须是垂直的关系，如果不是垂直的，webgl对于相机的工作是无法处理的
• up属性，要设置在camera.lookAt前才有效

总结

这一节我们主要讲了以下内容：

• 使用threejs在线editor导入obj模型
• 对相机位置position、up、lookAt进行讲解